设置表格的最大宽度答案

【问题标题】：Setting the maximum width of a table设置表格的最大宽度
【发布时间】：2017-02-25 01:57:20
【问题描述】：

我正在尝试设置表格的最大宽度，但它似乎不起作用。如果表格内的单词太长，它会自动扩大表格的宽度。我该如何阻止这种情况发生，而是让太长的单词转到下一行？

<style>
table {
max-width: 300px;
}
table,td {
border: 1px solid red;
}
div {
border: 1px solid blue;
word-wrap: break-word;
}
</style>

<table>

<tr>
<td>
<div> hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello </div>
</td>
</tr>

</table>

【问题讨论】：

也将max-width 添加到td。 jsfiddle.net/2kcc59o6

标签： html css width html-table max

【解决方案1】：

如果你想让你的最大宽度工作，你需要在桌子上设置CSS属性table-layout: fixed;

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

【讨论】：

另外，不能用max-width，只能用width。

【解决方案2】：

word-wrap: break-word; 如果您为容器分配了宽度，则将工作，您正在应用此属性。因此，您必须将width:100px; 或所需的宽度分配给div 标签。

<style type="text/css">
    div {
         width: 100px; /* this will limit the length of the word to 100px */
         border: 1px solid blue;
         word-wrap: break-word;
        }
</style>

【讨论】：

【解决方案3】：

将 max-wdith 放在 div 中可以解决问题 =)

<style>
table,td {
border: 1px solid red;
}
div {
border: 1px solid blue;
word-wrap: break-word;
max-width: 300px;
}
</style>

<table>

<tr>
<td>
<div> hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello </div>
</td>
</tr>

</table>

【讨论】：

【解决方案4】：

在您的 css 部分添加以下规则。

div{
    overflow-wrap: break-word;
    max-width: 300px;

【讨论】：