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

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" 中内容的字符长度不同，我也想修复单元格宽度。

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

我认为这可以在 jQuery 的帮助下使用 Javascript 来完成，通过计算文档准备好的表格单元格宽度，然后使用 on window resize 添加一些函数，从而计算单元格宽度。单元格宽度将是(tablewidth in px - 60px)/6 我是初学者，我不太了解。我如何使用 jQuery 和（或）Javascript 来做到这一点。

如果有人让我成为小提琴，那将非常有帮助..

Answer 1

你可以用 CSS 做到这一点，通过应用每个 td 相等的百分比：

td{
 width:   16%;
}

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

对于更新后的问题，您可以使用 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];
    });
});

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