如何防止我的html表拉伸

Question

有时,当我的一个表格单元格中的一段数据太长时,它会拉伸单元格并使整个表格的布局变形.我怎么能阻止这个？

Answer 1

您可能想要table-layout:fixed并在行的第一个单元格上设置宽度.

有关详细说明,请参见http://www.w3.org/TR/CSS2/tables.html#fixed-table-layout.

Answer 2

我只是遇到了同样的问题，最终解决了这个问题：

table { width: 1px; /* This ugly hack allows the table to be only as wide as necessary, breaking text on spaces to allow cells to be less wide. */ }

显然，将表的宽度设置为很小的值会迫使它分解文本并占用较少的水平空间。但是单词不会被打断，因此该表最终至少要足够大以容纳每一列的最大单词。

经过以下测试并证明是正确的：

Linux（Ubuntu 10.04）

• Firefox 3.6.18
• 铬浏览器12.0.742.112（90304）意味着什么
• Konqueror 4.5.3
• SeaMonkey 2.0.11

视窗：

• Internet Explorer 7
• Firefox 4.0.1

如果有人（我目前无法满足）可以在IE，Firefox，Chrome，Safari和Opera的最新版本上进行测试并发表评论或编辑此答案，那就太好了！

Answer 3

使用 CSS 设置 td 标签的宽度和高度。然后你需要处理溢出。

td {
  width: 40px;
  height: 20px;
}