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

问题描述：

我有两列的表。我通过设置它的头的宽度设置第一列的宽度以30％：如何将html表格的最后一列的宽度设置为可用宽度的百分比？

#TableFirstHeader 
{ 
    width: 30%; 
}

这工作不错，但如果我尝试了第二头的宽度设置为65％：

#TableSecondHeader 
{ 
    width: 65%; 
}

它简单地被忽略。我可以将该值设置为任何值，第二列总是延伸到表的末尾。

我真正想要的是第二列和表右侧之间的5％差距。

我试着创建一个空列，通过设置宽度5％的标题，没有任何东西在里面，但那并没有做任何事情。

如何获得该列仅使用可用总宽度的65％（或者像可用宽度的90％，那也可以）？

你是否将表格的宽度设置为95％，看看是否有帮助？默认情况下，表格想要成为它所在容器的宽度。 – Jared 2011-05-20 13:52:42

是的，事情是我希望行是全宽。这听起来很愚蠢，但我符合规格。 – 2011-05-20 15:04:09

我想我并没有真正遵循你想要做的事情。无论如何，你可以截图你有什么，并标记它，以显示它应该看起来如何？ – Jared 2011-05-20 18:30:41

答

您无法组合表格的所有列组成表格的宽度。

我不知道你在做什么，但是也许你可以在最后一列的单元格中添加一个正确的填充以获得你想要的效果或类似的东西。

答

<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％％右填充）第2列：

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

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

相关推荐