对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

小提琴： 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);
});