表超出 div答案

【问题标题】：Table going out of div表超出 div
【发布时间】：2013-01-06 03:41:41
【问题描述】：

我的 Spring MVC 应用程序的布局有问题。在我的应用程序中，即使我为此 div 设置了宽度参数，包含在 div 中的表也会退出。我尝试了许多我用谷歌搜索但没有成功的解决方案。这是我的应用程序中的 jsp 文件、CSS 文件和屏幕。正如您所看到的，当表格中的文本很长时，它不会换行（如我所愿）。

CSS 文件：

    th,td {
    border-style: solid;
    border-width: 5px;
    border-color: #BCBCBC;
}


#all {
    width: 500px;
}

#tablediv {
    width: 400px;
    float: left;
}

jsp文件：

    <body>
<h3>All your notes:</h3>
<c:if test="${!empty notes}"/>

<form method="post" action="manage_note">

<div id="all">
<div id="tablediv">

<table>

<tr>
    <th class="widther">Note date</th>
    <th>Description</th>
</tr>

<c:forEach items="${notes}" var="note">

<tr>
    <td class="widther">${note.date} ${note.time}</td>
    <td >${note.description}</td>
    <td><input type="radio" name="chosen_note" value="${note.note_id}"></td>
</tr>

</c:forEach>

</table>
</div>

<div id="addbutton">
    <input name="add_note" type="submit" value="Add note"/>
</div>


</div>


<div id="restbuttons">
    <input name="edit_note" type="submit" value="Edit"/>
    <input name="delete_note" type="submit" value="Delete"/>
</div>

</form>

</body>

这是屏幕：

http://imageshack.us/photo/my-images/203/tableproblem.png/

【问题讨论】：

标签： html css html-table

【解决方案1】：

您需要做两件事来防止表格变得太大。

1) 将table-layout 设置为fixed：

table {
    table-layout: fixed;
    width: 100%;   
}

2) 将 word-wrap 设置为 break-word 用于 td/th

th,td {
    border-style: solid;
    border-width: 5px;
    border-color: #BCBCBC;
    word-wrap: break-word;
}

您可以在此处查看一个工作示例：http://jsfiddle.net/d6WL8/

【讨论】：

我正在使用 eclispe，我没有“自动换行”，只有“字间距”。无论如何，我尝试添加“自动换行”但没有成功
@caro - 我已经更新了我的答案。似乎您的表格超出了#tablediv 的范围。您需要将其设置为固定的表格布局。
还要确保包含尽可能多的 tds。我注意到你有 3 列 td，只有 2 列。这些匹配很重要。
好的，但正如你所看到的，我想在 td 中制作单选按钮，但本专栏中没有这个按钮。感谢您的回答，如果我有类似的问题，我会尝试这个解决方案。但现在对我来说@fredsbend 解决方案就足够了。
这是您正在处理的表。您不能正确地拥有列多于标题的行。这没有意义。标题列中的行列不匹配是不正确的标记。我只是让你知道，这样你就可以生成正确的代码。

【解决方案2】：

我有一个简单的解决方案，希望有一天它可以帮助某人。

任何从容器中流出的表，只需用div标签和style="overflow:auto"封装它

<div style="overflow:auto">
<table>
.
.
.
</table>
</div>

【讨论】：

【解决方案3】：

hoooman 的答案是正确的，但也许你的意思是别的。您可以在该表格上使用 overflow:auto 并指定宽度，如果内容超出表格范围，它将创建滚动条。

还有overflow-x和overflow-y指定哪个轴。

【讨论】：

是的，溢出有效，我认为这是长字符串的最佳解决方案 :) 非常感谢 :)

【解决方案4】：

如果是长字符串，比如网址，可以使用：

word-wrap: break-word;

这将打破列末尾的“换行”文本，而不是像 break-word 那样在没有空格的情况下无法开箱即用（例如长网址强>)

并添加：

overflow-y:hidden;

这将防止溢出的文本与下一行重叠

【讨论】：

【解决方案5】：

那是因为您有 1 个大约 100 个字符长的单词，请尝试在其中间放置一个空格，它应该会自行修复。

【讨论】：

我相信这个问题与如何处理长字符串有关。我不认为简单地添加空格是一个合适的解决方案。
是的，增加空间是有效的，但就像 Axel 说的那样，在这种情况下这不是一个好的解决方案。

【解决方案6】：

设置max-width 和word-wrap

【讨论】：

【解决方案7】：

有时会在 Div 中添加表格。在我的情况下，我为 <div> 提供了 padding-right:0px

【讨论】：

【解决方案8】：

我也遇到了这个问题，在css中添加了这个类并修复了桌子 { 左边距：0 }

【讨论】：

【解决方案9】：

这是一个老问题，但我有一个更简单的方法。

只需添加这个：

th, td {
    word-break: break-word; /*or you can use word-break:break-all*/
    min-width: 50px; /*set min-width as needed*/
}

如果您的 table 已设置为 table-layout:fixed，th 或 td 的 最小宽度 将不起作用。删掉就好了。

如果您找不到 table-layout 的旧 CSS，请添加此内容

table {
    table-layout:unset !important;
}

如果您希望代码仅在您想要的页面上工作，请确保在表格之前提供额外的 class / id。

示例：

.entry-content table {
    table-layout: unset !important;
}
.entry-content th, .entry-content td {
    word-break: break-word;
    min-width: 50px;
}

希望对大家有所帮助。祝你好运！

【讨论】：

【解决方案10】：

作为表格一部分的某些单元格值超出了表格。

在尝试了上面给出的多个选项后，将表格宽度减小到 90% 解决了这个问题。

table {
  border-collapse: collapse;
  width: 90%;
}

【讨论】：

那不是缩小表格的宽度，而是设置宽度，表格的宽度默认是根据内容来的，但是在调整之前最好也设置表格的宽度列来控制这一切，所以对于忘记的人来说可能是一个解决方案