如何使用 table-layout: fixed 设置两行标题表的宽度？答案

【问题标题】：How can I set the widths of a two-row header table with table-layout: fixed?如何使用 table-layout: fixed 设置两行标题表的宽度？
【发布时间】：2012-12-12 22:38:46
【问题描述】：

我想要的表头：

<table class="tabel_op_panou" style="margin: 0px 2px 0px 2px; width: 99%; table-layout:fixed;">
<tr>
    <th rowspan="2" style="width: 35%;">A</th>
    <th colspan="2" style="width: 25%;">B</th>
    <th colspan="3" style="width: 40%;">C</th>
</tr>
<tr>
    <th style="width: 8%;">B1</th>
    <th style="width: 17%;">B2</th>
    <th style="width: 8%;">C1</th>
    <th style="width: 17%;">C2</th>
    <th style="width: 15%;">C3</th>
</tr>

问题是无论我如何设置宽度，第二行都保持不变。我尝试了百分比和固定像素宽度。

从样式中删除表格布局似乎可行，但我需要固定布局。在保持“表格布局：固定”的同时有什么办法吗？

我希望最终的布局看起来像 this 但使用 table-layout: fixed/

【问题讨论】：

我希望第二行标题具有指定的宽度。有点像this，但使用 table-layout:fixed

标签： html

【解决方案1】：

table-layout:fixed:

表格和列宽由表格和col的宽度设置元素或第一行单元格的宽度。细胞在后续行不影响列宽。

所以，你可以像这样修改你的代码：

<table class="tabel_op_panou" style="margin: 0px 2px 0px 2px; width: 99%;border:1px solid grey;table-layout:fixed;">
    <col style="width: 35%;"/>
    <col style="width: 8%;"/>
    <col style="width: 17%;"/>
    <col style="width: 8%; "/>
    <col style="width: 17%;"/>
    <col style="width: 15%;"/>
<tr>
    <th rowspan="2" style="width: 35%; border:1px solid grey;">A</th>
    <th colspan="2" style="width: 25%; border:1px solid grey;">B</th>
    <th colspan="3" style="width: 40%; border:1px solid grey;">C</th>
</tr>
<tr>
    <th style="width: 8%; border:1px solid grey;">B1</th>
    <th style="width: 17%; border:1px solid grey;">B2</th>
    <th style="width: 8%; border:1px solid grey;">C1</th>
    <th style="width: 17%; border:1px solid grey;">C3</th>
    <th style="width: 15%; border:1px solid grey;">C4</th>
    </tr>
</table>

查看演示：http://jsfiddle.net/rRJU7/2/

【讨论】：