如何使用 JavaScript 和 jQuery 设置 HTML 表格单元格宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6403728/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set HTML table cell width using JavaScript and jQuery
提问by blasteralfred Ψ
I have a HTML table like the below;
我有一个如下所示的 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>
The table is designed to stretch to screen (or a div having specific width). I want equal width for all cells having class="cell"and this works well when the character length of text in all cells having class="cell"are equal. But, I want to fix the cell width even if the character lengths of contents in class="cell"are different.
该表格旨在拉伸到屏幕（或具有特定宽度的 div）。我希望所有单元格的宽度相等，当所有单元格中文class="cell"本的字符长度class="cell"相等时，这很有效。但是，即使内容的字符长度class="cell"不同，我也想修复单元格宽度。
Also you can see that the first and last cells have fixed width, in pixelsand others cell widths are to be calculated on the basis of percentage .. I want equal width for all cells (except first and last with fixed width in pixels).
您还可以看到第一个和最后一个单元格具有固定宽度，以像素为单位，其他单元格宽度将根据百分比计算..我希望所有单元格的宽度相等（第一个和最后一个单元格宽度固定，以像素为单位）。
I think this can be done using Javascript with the help of jQuery, by calculating the table cell widths on document ready, and then adding some function using on window resizeand thereby calculating cell widths. The cell widths will be (tablewidth in px - 60px)/6I am a beginner and I don't know much.. How can I do this using jQuery and (or) Javascript.
我认为这可以通过在 jQuery 的帮助下使用 Javascript 来完成，方法是计算文档准备好的表格单元格宽度，然后添加一些函数on window resize，从而计算单元格宽度。单元格宽度将是(tablewidth in px - 60px)/6我是初学者，我知道的不多.. 我如何使用 jQuery 和（或）Javascript 来做到这一点。
It will be very helpful if someone make me a fiddle..
如果有人让我成为小提琴，那将非常有帮助。
回答by Niklas
You could just do that with CSS, by applying each tdan equal percentage:
你可以用 CSS 做到这一点，通过应用每个td相等的百分比：
td{
width: 16%;
}
td{
width: 16%;
}
example: http://jsfiddle.net/niklasvh/wKmxD/
示例：http: //jsfiddle.net/niklasvh/wKmxD/
With your updated question, you could do it with javascript by first storing the widths into an array, and then referencing that on window resize, and use the aspect ratio difference to place new widths:
对于您更新的问题，您可以通过首先将宽度存储到一个数组中，然后在 上引用它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];
});
});
