如何防止html表拉伸

有时，当我的一个表格单元格中的一段数据过长时，它会拉伸单元格并使整个表格的布局变形。如何防止这种情况发生？

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

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

---

假设单元格中没有任何不间断的空格或没有空格的超长文本，我通常会通过CSS显式设置所述单元格的宽度（似乎比执行“width='100'之类的操作效果更好）。如果单元格中的数据只是一个很长的字符串，那么除了通过编程将其截断，或者将数据包装在一个具有显式宽度的div中，或者类似于overflow:hidden/auto（如果需要水平滚动条或其他内容，则为auto）。

使用

overflow:hidden

来隐藏溢出：

td, th {
    overflow: hidden;
}

---

为此，需要为您的

或

标记指定一个宽度。

如果您必须绝对让表即使在不间断空格的情况下也保持其布局，则您需要使用：

 overflow: hidden;

---

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

您可能需要

表格布局：固定
并在行的第一个单元格上设置宽度

有关详细说明，请参阅。
我也遇到了同样的问题，最后解决了这个问题：

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
火狐4.0.1

如果有人（在我目前的情况下我不能）可以在IE、Firefox、Chrome、Safari和Opera的最新版本上测试这一点，并留下评论或编辑这一答案，那就太棒了！
你有哪些太长的数据？大图像？带空格的长文本？长“词”（文本没有空格或只有不间断的空格）（
）？将来的更新：
宽度：最小内容
也会做同样的事情，但不确定浏览器的支持，尽管对我来说，chrome是可行的