javascript - 对 n 列平均使用剩余空间

Question

如何设置表格，使最后 n 列均等地使用表格的可用宽度？

详细说明: 我在后端 (ASP.NET MVC) 生成一个 HTML 表，它有两个标题列和不同数量的数据列:

ID Region           Data col 1   Data col 2   ... Data col n
_______________________________________________________
 1 Region name 1    data         data             data
 2 Region 2         data         data             data

...

80 Another region   data         data             data

表格的宽度=100%，第一列和第二列(ID 和 Region)使用固定宽度。

数据列(尤其是标题)的内容可以是不同长度的字符串。

如何设置 CSS/JS 以使剩余列的宽度相同 - 并使用表格的全部剩余宽度？

我的第一个想法是简单地在服务器上设置 style="@(100/NumberOfColumns)%;"。但是，由于前两列的宽度是固定的，而且我不知道服务器端表格的大小，所以这种方法失败了。

Answer 1

fiddle :http://jsfiddle.net/Dadv2/2/

HTML 代码:

<table width="100%">
    <tr>
        <td style="width:100px;" class="fixCol">ID Region</td>
        <td style="width:120px;"  class="fixCol">Data</td>
        <td class="Col">Col1</td>
        <td class="Col">New Column</td>
        <td class="Col">Another Column</td>
    </tr>
</table>

JS 代码:

$(document).ready(function(){
var tableWidth = $("table").width();
var colCount = $("table td.Col").size();

// gett fixed td Width
fixCol = 0;
$.each($("table td.fixCol"), function(){
    fixCol += $(this).width();    
});

//set remainging td width
var tdWidth = (tableWidth-fixCol)/colCount;


$("table .Col").css('width',tdWidth);
});