對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);
});

Answer 2

試試這種方式：

First Column min width : Xpx;
Second Column min width : Ypx;
Last N Columns width : (100/N) %

HTML :( 演示 ）

<table width="100%">
    <tr>
        <td style="min-width:100px;">A</td>
        <td style="min-width:300px;">A</td>
        <td style="width:33%;">L</td>
        <td style="width:33%;">L</td>
        <td style="width:33%;">L</td>
    </tr>
</table>