HTML表 - 固定和多个可变列宽

Question

我必须建立一个包含5列的表.表格宽度可变(内容宽度的50%).有些列包含固定大小的按钮,因此这些列应该具有固定的,例如100px.有些列中包含文本,因此我希望这些列具有可变的列宽.

例如:

Column1:20%(tablewidth - sum(fixedwidth_columns))'

第2列:100px

Column3:40%(tablewidth - sum(fixedwidth_columns))

第4列:200px

第5列:40%(tablewidth - sum(fixedwidth_columns))

实现这一目标的最佳方法是什么？

Answer 1

您可以table-layout: fixed为table元素设置,然后只需width在相关<td>或<th>元素上设置属性:

table {
    table-layout: fixed;
}

JSFiddle演示.

来自MDN:

的table-layoutCSS属性定义算法要用于布局表单元格,行和列.

价值观:

fixed:
表格和列宽由第一行单元格的宽度table和col元素的宽度设置.后续行中的单元格不会影响列宽.

Answer 2

在表格中固定宽度,你需要设置table-layout属性,fixed; 因为你混合%和px,它将不连贯.

您可以仅设置px宽度并最终设置较小的%值,并让其他列使用宽度保持可用.示例:http://jsfiddle.net/M4Et8/2/

<table style='table-layout:fixed;width:100%' border='1'>
    <tr>
        <th style='width: 20%;'>Column1</th>
        <th style='width: 100px;'>Column2</th>
        <th >Column3</th>
        <th style='width: 200px;'>Column4</th>
        <th >Column5</th>
    </tr>
</table>