如何将 html 表格的最后一列的宽度设置为可用宽度的百分比？答案

【问题标题】：How can I set the width of the last column of an html table to a percentage of the available width?如何将 html 表格的最后一列的宽度设置为可用宽度的百分比？
【发布时间】：2017-08-13 05:26:43
【问题描述】：

我有一张有两列的表格。我通过将标题的宽度设置为 30% 来设置第一列的宽度：

#TableFirstHeader
{
    width: 30%;
}

效果很好，但如果我尝试将第二个标题的宽度设置为 65%：

#TableSecondHeader
{
    width: 65%;
}

它被简单地忽略了。我可以将该值设置为任何值，并且第二列始终延伸到表格的末尾。

我真正想要的只是第二列和表格右侧之间大约 5% 的差距。

我尝试通过设置宽度为 5% 的标题来创建一个空列，其中没有任何内容，但这没有任何作用。

我怎样才能让该列仅使用可用总宽度的 65%（或者像可用宽度的 90%，这也可以）？

【问题讨论】：

您是否将表格的宽度设置为 95%，看看是否有帮助？默认情况下，表格希望是它所在容器的宽度。
是的，问题是我希望行是全宽。听起来很傻，但我符合规范。
我想我并没有真正遵循你想要做的事情。无论如何，您可以截取您拥有的内容并标记它以显示它的外观？

标签： html css css-tables spacing

【解决方案1】：

<style type="text/css">
    table#YourTableId { width:95%; }
    th#TableFirstHeader { width:31.6%; }
    th#TableSecondHeader { width:68.4%; }
</style>

第二个th不一定需要分配宽度。你也可以使用

    table#YourTableId td:first-child { width:31.6%; }

相反。口味问题。

从这里编辑：

由于您已在上述评论中澄清，无论出于何种原因，行需要是表格容器宽度的 100%，如果最后一列可能有额外的填充，我会选择 jeroen 的解决方案。

如果您必须将第二列设置为表格宽度的 65%（而不是 70%，右侧填充为 5%）：

<style type="text/css">
    th#TableFirstHeader { width:30%; }
    th#TableSecondHeader { width:65%; }
    th#TableThirdHeader { width:5%; }
    div#Stretch { width:100%; }
</style>

<table>
    <tr>
    <th id="TableFirstHeader">Some Content</th>
    <th id="TableSecondHeader">Some Content</th>
    <th id="TableThirdHeader"><div id="Stretch"></div></th>
    </tr>
</table>

空的第三列将折叠。其容器宽度为 100% 的空 div 可防止该行为。

【讨论】：

【解决方案2】：

你不能，一个表格的所有列组合起来就构成了表格的宽度。

我不知道您到底想达到什么目的，但也许您可以在最后一列的单元格上添加右填充以获得您想要的效果或类似的效果。

【讨论】：