HTML 表格 - 固定和多变量列宽

Question

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

例如：

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

第 2 列：100 像素

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

第 4 列：200 像素

Column5: 40% of (tablewidth - sum(fixedwidth_columns))

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

Answer 1

我采用了相同的解决方案： 使用 'table-layout:fixed' 并以 percentages 为单位指定 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>

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

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

table {
    table-layout: fixed;
}

JSFiddle Demo.

来自MDN：

table-layout CSS 属性定义了用于 布局表格单元格、行和列。

价值观：

固定：
表格和列的宽度由table 和col 元素的宽度或第一行单元格的宽度设置。后续行中的单元格不会影响列宽。