如何使用JavaScript和jQuery设置HTML表格单元格宽度?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (139)

我有一个像下面这样的HTML表格;

<table style="width: 100%">
<tr>
<td style="width: 30px">cell</td>
<td class="cell">cell</td>
<td class="cell">cellcell</td>
<td class="cell">cellcellcell</td>
<td class="cell">cellcellcellcell</td>
<td class="cell">cellcellcellcellcell</td>
<td class="cell">cellcellcellcellcellcell</td>
<td style="width: 30px">cell</td>
</tr>
</table>
提问于
用户回答回答于

可以使用CSS执行此操作,方法是应用td相同的百分比:

td{
 width:   16%;
}

使用更新的问题,您可以使用javascript,首先将宽度存储到数组中,然后引用它window resize,并使用宽高比差异来放置新的宽度:

var w = [];
var tw = $('table').width();
$('table td').width(function(i,e){
    w[i]=e;
});

$(window).resize(function(){
    $('table td').width(function(i){
    return ($('table').width()/tw)*w[i];
    });
});

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动