Question

我的spring MVC应用程序的布局有问题。在我的应用程序中，包含在div中的表甚至我为这个div设置了一个宽度参数。我尝试了很多解决方案，我用Google搜索但没有成功。这是我的应用程序中的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/

Answer 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/

Answer 2

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

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

Answer 3

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

Answer 4

设置max-width以及word-wrap

Answer 5

有时在Div内部添加一个表格。在我的情况下，我给了padding-right：<div>

为0px

Answer 6

我也面临这个问题，在CSS中添加了此类并修复了表{ 左边距：0 }

Answer 7

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

只需添加此：

如果您的

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

已经设置为th，则{p> <{> min-width ”对于td或table来说将无效。只需删除它即可。

或在找不到table-layout:fixed的旧CSS时添加此

table-layout

如果您希望代码仅在所需的页面上运行，请确保在表前再提供一个 class / id 。

示例：

table {
    table-layout:unset !important;
}

希望它可以为大家提供帮助。祝你好运！

Answer 8

我有一个简单的解决方案，希望有一天能对某人有所帮助。

任何从其容器中流出的表，只需使用带有div的{{1}}标记对其进行封装

style="overflow:scroll"

您已经准备好出发了。 Adios！

Answer 9

如果是长字符串，例如url，则可以使用：

word-wrap: break-word;

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

并添加：

overflow-y:hidden;

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

Answer 10

表中的某些单元格值不在表中。

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

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

表走出div

10 个答案: