表格溢出，在HTML中包含div [英] Table overflowing containing div in HTML
本文介绍了表格溢出，在HTML中包含div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个表格溢出其包含的div。我想显示表格中的所有内容，所以表格必须超过100％的宽度才能这样做。问题是包含div不反映它的孩子的大小。我在这里有一个例子，它是一个响应页面，但问题只发生在低宽度 - 在宽度很高的情况下就没有问题。
I have a table which overflows its containing div. I want to show all the contents in the table, so the table has to go over 100% width to do so. The problem is the containing div does not reflect the size of its child. I have an example here, it's a responsive page, but the problem only happens at low widths - at high widths it is fine.
<html>
<head>
<title>Test</title>
<style type="text/css">
body, table, td {
color : #1D1F22;
}
#content {
padding: 10px;
/*overflow: hidden; */
background-color:red;
}
.border {
background-color: #4385DB;
color : #4385DB;
}
table
{
word-break: break-all
}
@media(min-width: 800px) {
#content {
width : 98%;
}
}
</style>
</head>
<body>
<div id="content">
<table cellpadding="7" cellspacing="1" class="border">
<tr>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
<td><img src="dogs.jpg" width="400" height="100" alt="trev"></td>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
</tr>
</table>
</div>
</body>
</html>
js fiddle here: http://jsfiddle.net/GrimRob/qg75arbs/
推荐答案
添加到你的#content css，如果你想要表格推出包含div。
Add this to your #content css if you want the table to push out the containing div.
display: table-cell;
这篇关于表格溢出，在HTML中包含div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
