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

【问题标题】：How to make td/th tags fixed width?如何使 td/th 标签固定宽度？
【发布时间】：2012-03-09 09:44:04
【问题描述】：

我正在尝试为固定宽度的网站创建一个表格，但它是基于固定宽度 td 标签的固定宽度，而不是具有固定宽度的整个表格。这样做的需要是因为我正在使用 jQuery 动态显示和隐藏一些列，并使用 jQuery 滚动插件在表格变宽时滚动表格。我遇到的问题是，当 td 标签的宽度使表格比其包含的 div 更宽时，td 标签开始缩小而不是保持它们的宽度。到目前为止，我所做的一切都没有使 td 标签保持正确的宽度。你可以在这里看到我正在处理的 jsfiddle：

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

如何使 td 标记固定宽度，即使它们使表格比其容器更宽？

【问题讨论】：

标签： html css tablelayout

【解决方案1】：

th {
  min-width:200px;
  max-width:200px
}

将其用于固定宽度

【讨论】：

在我看来这可能相当于只使用width:200px;。您能否编辑您的答案以添加更多详细信息，说明何时有人可能想要使用此方法而不是其他人（反之亦然）？

【解决方案2】：

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

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

请注意，这只会与 IE7+ 兼容，但您可以使用技巧使其正确显示为 inline block in IE 7。

技巧是将它们设置为display: inline-block，以便它们从元素的末尾跑出（使用white-space: nowrap）。

【讨论】：

【解决方案3】：

您可以在 css 中使用 max-width 和 min-width 来定义您希望 td 达到的最小和最大宽度。

【讨论】：

谢谢，成功了！我实际上已经在另一篇具有相同主题的帖子上看到了该答案，但假设如果设置宽度不起作用，那么设置最小宽度也不起作用。我想我对表格不太熟悉。感谢您的帮助！
对于稍后遇到此问题的人，您可以在此处看到该解决方案：jsfiddle.net/MxE9A/3