如何使用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"中的內容的字符長度不同，我也要修正單元格寬度。

你也可以看到，第一和最後一個單元有固定的寬度，以像素和其他單元格寬度將被百分比的基礎上計算的。我想對所有細胞相同的寬度（除第一個和最後用固定寬度以像素爲單位）。

我認爲這可以使用javascript在jQuery的幫助下完成，計算文檔就緒時的表格單元寬度，然後使用on window resize添加一些函數，從而計算單元寬度。單元格寬度將是(tablewidth in px - 60px)/6我是一個初學者，我不知道太多..我怎麼能做到這一點使用jQuery和（或）JavaScript。

這將是非常有益的，如果有人讓我一個小提琴..

在此先感謝... :)

blasteralfred

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/