Html 表退出 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14466528/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Table going out of div
提问by caro
I have a problem in layout in my spring MVC application. In my app, table which is containing in div going out of it even I set a width parameter for this div. I tried many solutions which I googled but without success. Here is my jsp file, CSS file, and screen from my app. As you can see when text in table is long it's not break to new line (as I want).
我的 spring MVC 应用程序的布局有问题。在我的应用程序中，即使我为这个 div 设置了一个宽度参数，包含在 div 中的表也会退出。我尝试了许多我用谷歌搜索但没有成功的解决方案。这是我的应用程序中的 jsp 文件、CSS 文件和屏幕。正如您所看到的，当表格中的文本很长时，它不会换行（如我所愿）。
CSS file:
CSS文件：
th,td {
border-style: solid;
border-width: 5px;
border-color: #BCBCBC;
}
#all {
width: 500px;
}
#tablediv {
width: 400px;
float: left;
}
jsp file:
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>
And here is screen:
这是屏幕：
回答by Axel
You'll need to do two things to prevent the table from becoming too large.
您需要做两件事来防止表格变得太大。
1) Set the table-layoutto fixed:
1) 设置table-layout为fixed：
table {
table-layout: fixed;
width: 100%;
}
2) Set word-wrapto break-wordfor td/th
2）设置word-wrap到break-word用于TD /日
th,td {
border-style: solid;
border-width: 5px;
border-color: #BCBCBC;
word-wrap: break-word;
}
You can see a working example here: http://jsfiddle.net/d6WL8/
你可以在这里看到一个工作示例：http: //jsfiddle.net/d6WL8/
回答by Nikhil Zurunge
I got a simple solution, hope it may help somebody someday.
我有一个简单的解决方案，希望有一天它可以帮助某人。
Any table which is flowing out of its container, just encapsulate it with a divtag with style="overflow:scroll"
任何流出其容器的表，只需用一个div标签封装它style="overflow:scroll"
<div style="overflow:scroll">
<table>
.
.
.
</table>
</div>
And you are ready to go. Adios!
你准备好了。再见！
回答by 1934286
The answer by hoooman is correct but maybe you mean something else. You can use overflow:auto on that table and also specify a width and it will create scroll bars if the content goes outside of the table.
hooman 的回答是正确的，但也许你的意思是别的。您可以在该表格上使用 overflow:auto 并指定宽度，如果内容超出表格，它将创建滚动条。
There is also overflow-x and overflow-y to specify which axis.
还有溢出-x 和溢出-y 来指定哪个轴。
回答by Arun Kumar
Some of the cell values which are part of the table go out of the table.
属于表格一部分的某些单元格值会从表格中删除。
After trying multiple options given above, reducing the table width to 90% solved the issue.
在尝试了上面给出的多个选项后，将表格宽度减少到 90% 解决了这个问题。
table {
border-collapse: collapse;
width: 90%;
}
回答by hoooman
That is because you have 1 word that is about 100 character long, try putting a space in the middle of that and it should fix itself.
那是因为您有 1 个大约 100 个字符长的单词，尝试在其中放置一个空格，它应该可以自行修复。
回答by Jonas
set max-widthalong with word-wrap
设置max-width连同word-wrap
回答by MD Shahrouq
Some times adding a Table inside a Div it happens.
In my case i had given padding-right:0px for the <div>
有时在 Div 中添加一个 Table 会发生。在我的例子中，我给了 padding-right:0px<div>
回答by Ashutosh Jha
I was also facing this issue , added this class in css and fixed table { margin-left:0 }
我也面临这个问题，在 css 和固定表中添加了这个类 { margin-left:0 }
回答by Digital Fun
This is an old question, but I have a simpler method.
这是一个老问题，但我有一个更简单的方法。
Just add this:
只需添加这个：
th, td {
word-break: break-word; /*or you can use word-break:break-all*/
min-width: 50px; /*set min-width as needed*/
}
the min-widthfor thor tdwill not work if your tablealready set to table-layout:fixed. Just delete it.
的最小宽度为th或者td，如果您将无法正常工作table已经设置为table-layout:fixed。删除它就行了。
or add this if you cannot find old css for table-layout
或者如果你找不到旧的 css 就添加这个 table-layout
table {
table-layout:unset !important;
}
make sure you give an additional class/ idbefore the table if you want the code to work only on the page you want.
如果您希望代码仅在您想要的页面上工作，请确保在表格之前提供额外的类/ ID。
Example:
示例：
.entry-content table {
table-layout: unset !important;
}
.entry-content th, .entry-content td {
word-break: break-word;
min-width: 50px;
}
Hope it can help all of you. Good luck!
希望能帮到大家。祝你好运！
