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

Question

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

#TableFirstHeader
{
    width: 30%;
}

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

#TableSecondHeader
{
    width: 65%;
}

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

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

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

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

Answer 1

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

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

    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 可以防止这种行为。

Answer 2

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

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