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：（DEMO）

<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>

对n列使用剩余空间

2 个答案: