javascript - 如何使用 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>

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

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

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

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

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/