Question

我必须构建一个包含5列的表。表格宽度可变（内容宽度的50％）。有些列包含固定大小的按钮，因此这些列应该具有固定的，例如100px。有些列中包含文本，因此我希望这些列具有可变的列宽。

例如：

Column1：20％（tablewidth - sum（fixedwidth_columns））'

第2列：100px

Column3：40％（tablewidth - sum（fixedwidth_columns））

第4列：200px

Column5：40％（tablewidth - sum（fixedwidth_columns））

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

Answer 1

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

table {
    table-layout: fixed;
}

<强> JSFiddle Demo

来自MDN：

table-layout CSS属性定义了要使用的算法布置表格单元格，行和列。

值：

<强>固定
表和列宽度由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>

Answer 3

我已经应用了相同的解决方案：使用“ 表格布局：固定”，并以百分比的形式指定td的大小。它适用于我的静态内容，但是当我的内容增加时， td 的扩展方式就会受到影响，所有 td 和 tr 都会受到干扰。

解决方案：

经过如此多的发现，我提出了以下解决方案，通过该解决方案，您的单个表将能够显示不同的列大小，而水平轴上没有展开

<table style="table-layout: fixed;">
    <tbody>
        <tr>
            <td colspan="7">
                <span>Record Name</span><br>
                <span>FUNNY FUNNEL CAKES</span>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <span>Event Name</span><br>
                <span>NATIONAL CAKE DAY CELEBRATION</span>
            </td>
            <td colspan="2">
                <span>City</span><br>
                <span>SAN DIEGO</span>
            </td>
            <td colspan="1">
                <span>Zip</span><br>
                <span>92117-4351</span>
            </td>
            <td colspan="1">
                <span>Inspection Type</span><br>
                <span>Routine</span>
            </td>
        </tr>
        <tr>
            <td colspan="6">
                <span>Owner</span><br>
                <span>PATTY CAKE</span>
            </td>
            <td colspan="1">
                <span>Inspection Status</span><br>
                <span>Complete</span>
            </td>
        </tr>
    </tbody>
</table>

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

3 个答案: