0

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

#TableFirstHeader
{
    width: 30%;
}

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

#TableSecondHeader
{
    width: 65%;
}

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

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

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

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

4

2 回答 2

2 
<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 可防止该行为。

于 2011-05-20T14:10:04.527 回答
1

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

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

于 2011-05-20T13:57:44.703 回答