18

我的 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/

4

10 回答 10

58

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

1）设置table-layout为fixed：

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

2) 设置word-wrap为break-wordtd/th

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

您可以在这里看到一个工作示例：http: //jsfiddle.net/d6WL8/

于 2013-01-22T19:47:35.380 回答
14

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

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

<div style="overflow:auto">
<table>
.
.
.
</table>
</div>
于 2019-05-28T06:44:20.323 回答
3

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

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

于 2013-01-22T19:45:15.247 回答
1

如果是长文本字符串，例如 URL，您可以使用：

word-wrap: break-word;

这将打破列末尾的“包装”文本，而不是像没有空格的开箱即用的断词（例如长网址）

并添加：

overflow-y:hidden;

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

于 2020-12-12T23:52:57.187 回答
0

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

于 2013-01-22T19:42:07.363 回答
0

我也遇到了这个问题，在 css 中添加了这个类并修复了 table { margin-left:0 }

于 2018-12-03T11:20:53.047 回答
0

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

只需添加：

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

如果您已经设置为，则最小宽度th或td将不起作用。只需删除它。tabletable-layout:fixed

或者如果你找不到旧的 css 则添加这个table-layout

table {
    table-layout:unset !important;
}

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

示例：

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

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

于 2019-02-16T19:46:15.927 回答
0

max-width一起设置word-wrap

于 2017-08-04T13:18:36.983 回答
0

有时会在 Div 中添加一个表。在我的情况下，我给了 padding-right:0px<div>

于 2018-03-06T11:12:23.233 回答
-1

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

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

table {
  border-collapse: collapse;
  width: 90%;
}
于 2020-03-19T02:01:17.923 回答