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

你不能，表的所有列组合起来构成表的宽度。

我不知道你想要达到的目标，但也许你可以在最后一列的单元格上添加一个正确的填充，以获得你想要的效果或类似的效果。

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

2 个答案: