固定大小的 HTML 表格单元格，即使内容太大？答案

【问题标题】：Fixed-size HTML table cells, even when content is too big?固定大小的 HTML 表格单元格，即使内容太大？
【发布时间】：2011-04-21 10:25:28
【问题描述】：

我想使用 HTML 创建一个图表。我使用了一个固定列的表。一切看起来都很好，但是如果 a 单元格的内容太长，则列宽会被扩大。我希望列宽保持固定，即使某些内容被隐藏。

有办法吗？

【问题讨论】：

CSS: How to set the table column width constant regardless of the amount of text in its cells? 的可能重复项

标签： html css

【解决方案1】：

除了@barrylloyd 的回答，我还建议使用：

td,th {
  min-width: 3em; /* the normal 'fixed' width */
  width: 3em; /* the normal 'fixed' width */
  max-width: 3em; /* the normal 'fixed' width, to stop the cells expanding */
}

min-width 可能是不必要的，但它涵盖了所有基础。

【讨论】：

非常感谢！ overflow: hidden 和 max-width: 1em 的组合成功了！

【解决方案2】：

试试……

表格{表格布局：固定}

在您的样式表中。

这会强制浏览器使用固定表格布局算法...

固定表格布局算法：

水平布局只取决于表格的宽度和列的宽度，而不是单元格的内容

允许浏览器比自动表格布局更快地布置表格

一旦收到第一行，浏览器就可以开始显示表格了

（见http://www.w3schools.com/Css/pr_tab_table-layout.asp）

【讨论】：

我唯一要补充的是，文本可能仍然会溢出td（例如，如果你有一个超长的字符串）并且如果 that发生这种情况时，您需要考虑将 td 内容包装在带有 overflow:auto 集合的 div 中。
链接失效

【解决方案3】：

如何用 CSS 来解决它：

td { overflow: hidden; }

应该够了。

【讨论】：

我不相信td 尊重overflow 属性。