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

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

例如：

第1列：20%（表宽-总和（固定宽度_列））'

第2列：100px

第3列：40%（表宽-总和（固定宽度_列））

第4列：200px

第5列：40%（表宽-总和（固定宽度_列））

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

您可以为

表

元素设置属性，然后只需在相关

或

元素上设置

宽度

属性：

表格{
表布局：固定；
}

从：

表格布局

CSS属性定义用于 布局表格单元格、行和列

价值观：

固定：
表格和列宽由

表格

和

列

元素的宽度或第一行单元格的宽度设置。后续行中的单元格不影响列宽

---

要固定表格的宽度，需要将

表格布局

属性设置为

fixed
因为你混合了%和px，它就不连贯了

您可以只设置px宽度，最终设置一个小值%并让其他列使用“左宽度”可用。
例子：


专栏1
专栏2
第3栏
专栏4
专栏5
我应用了相同的解决方案：
使用“表格布局：固定”，并以百分比给出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>


记录名称

有趣的漏斗蛋糕
事件名称

国家蛋糕日庆祝活动
城市

圣地亚哥
拉链

92117-4351
检验类型

例行公事
所有者

馅饼
检查状态

完成
只需在相关的
元素上设置
width
属性？嗯，不，不是这样的。宽度百分比是表格总宽度的百分比，而不是表格宽度-fixedcolumns.JSFiddle：看看这个：这就是我如此喜欢的原因。非常感谢。回答得很好。太糟糕了，Microsoft Outlook不了解表格布局…：）尽管有点晚了，但谢谢你的努力，非常感谢。
<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>