如何使td/th标签固定宽度？

问题描述：

我想为一个固定宽度的网站创建一个表格，但是固定宽度基于固定宽度td标签，而不是固定宽度的整个表格。对此的需求是因为我使用jQuery动态地显示和隐藏了一些列，并且使用jQuery滚动插件在表格变得更宽时进行滚动。我遇到的问题是，当td标签的宽度使表宽度超过其包含的div时，td标签开始缩小而不是保持其宽度。到目前为止，我所做的一切都没有让td标签保持正确的宽度。你可以看看我这里处理的的jsfiddle：如何使td/th标签固定宽度？

http://jsfiddle.net/MxE9A/1/

如何使TD标签固定的宽度，即使他们使表比其更广泛的容器？

答

可以使用最大宽度和最小宽度CSS来定义你想要的最小和最大宽度，以你的TD对达到。

谢谢，这工作！实际上，我在另一篇文章中看到了相同主题的答案，但假设如果设置宽度不起作用，那么设置最小宽度也不起作用。我想我对桌子不熟悉。谢谢您的帮助！ – 2012-02-18 01:27:55

对于稍后运行的人来说，您可以在此处看到该解决方案：http://jsfiddle.net/MxE9A/3/ – 2012-02-18 01:35:45

答

哈哈，所以我从来没有这样做过，但这里有一个解决方案。添加以下内容：

tr { 
    font-size: 0px; 
    white-space: nowrap; 
} 
th, td { 
    display: inline-block; 
}

请注意，这仅是IE7 +兼容，但你可以用技巧来得到它正确显示为inline block in IE 7。

窍门是将它们设置为display: inline-block，以便它们在元素的末端运行（使用white-space: nowrap）。

如何使td/th标签固定宽度？

相关推荐