Question

我有一个像下面这样的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>

该表设计为拉伸到屏幕（或具有特定宽度的div）。我希望所有具有class="cell"的单元格具有相等的宽度，当具有class="cell"的所有单元格中的文本字符长度相等时，这种方法很有效。但是，即使class="cell"中的内容的字符长度不同，我也想修复单元格宽度。

此外，您可以看到第一个和最后一个单元格具有固定宽度，像素，其他单元格宽度将根据百分比计算。我希望所有单元格的宽度相等（除了第一个和最后一个具有固定宽度（以像素为单位）。

我认为这可以在jQuery的帮助下使用Javascript完成，通过计算文档就绪的表格单元格宽度，然后使用on window resize添加一些函数，从而计算单元格宽度。单元格宽度为(tablewidth in px - 60px)/6我是初学者，我不太了解..我怎样才能使用jQuery和（或）Javascript。

如果有人让我成为一个小提琴，这将是非常有帮助的。

Answer 1

~~您可以使用CSS执行此操作，方法是将每个td应用于相同的百分比：~~

~~td{ width: 16%; }~~

~~示例：http://jsfiddle.net/niklasvh/wKmxD/~~

通过更新的问题，你可以通过首先将宽度存储到数组中，然后在window resize上引用它，并使用宽高比差异来放置新的宽度来使用javascript：

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];
    });
});

http://jsfiddle.net/niklasvh/543D9/

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

1 个答案: