确保遵守表格单元格的宽度

Posted 2023-03-05

【中文标题】确保遵守表格单元格的宽度

【英文标题】：Ensure that table cell widths are respected

【发布时间】：2012-02-25 04:25:26

【问题描述】：

我有一个带有多个列的 html <table>。如何确保在任何情况下都遵守给定的单元格/列宽度？也就是说，如果我给一个单元格的宽度为 100px，并且如果文本内容很长（超过 100 个字符且没有任何空格），则文本内容应该遵循 100px 宽度并换行到下一行..

我已经尝试过使用word-wrap:break-word，但这不起作用。

【参考方案1】：

使用table-layout: fixed 确保您的td 宽度得到尊重。

查看MDN docs 了解更多信息。

编辑

这样的东西应该适合你：

table 
    table-layout: fixed;

td 
    color:white;
    width:50px;
    background-color:Blue;
    word-wrap: break-word;
    max-width:50px;

这里是a working fiddle 来演示。

【讨论】：

好的...我已经尝试过了...但这似乎不适用于我的单元格的文本很长（中间没有任何空格）的情况...。 IE即使遵守单元格宽度，文本也会重叠并且不会换行到下一行..

谢谢很多...我刚刚尝试过...在 Firefox 中运行良好..但在 IE8 中，我只看到第一行文本内容...包裹的第二行是根本没有显示..