如何防止我的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
• Chromium-browser 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;
}

Answer 4

假设您没有任何不间断的空格或超长文本而单元格中没有空格，我通常会通过CSS明确设置所述单元格的宽度而获得最好的运气（似乎比做像“width ='100'”这样的事情。如果单元格中的数据只是一个非常长的字符串，除了以编程方式截断它，或者将数据包装在具有明确宽度的div中之外，没有什么可以做的。溢出：隐藏/自动（如果你想要一个水平滚动条或其他东西，则自动）。

Answer 5

使用overflow: hidden隐藏溢出：

td, th {
    overflow: hidden;
}

为此，我们需要为<td>或<th>代码指定宽度。

Answer 6

如果您必须绝对让表格保持其布局，即使面对不间断的空格，那么您还需要使用：

 overflow: hidden;

但是，我建议不要这样做。 IMO，让数据可读比布局完美更重要。