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

Posted 2023-02-16

技术标签:

【中文标题】HTML 表格 - 固定和多变量列宽【英文标题】：HTML Table - Both fixed and multiple variable column widths 【发布时间】：2014-03-06 06:47:00 【问题描述】：

我必须建立一个有 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))

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

【问题讨论】：

只需在相关的<td> 元素上设置width 属性？嗯，不，那样不行。宽度百分比取总表格宽度的百分比，而不是表格宽度 - 固定列。 JSFiddle: jsfiddle.net/M4Et8 看看这个：***.com/questions/7882979/… 【参考方案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>

【讨论】：

【参考方案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>

【讨论】：

有点晚了，但感谢您的努力，非常感谢。【参考方案3】：

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