html - 确保遵守表格单元格宽度

Question

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

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

Answer 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进行演示。