表溢出包含HTML中的div
[英]Table overflowing containing div in HTML
问题描述
I have a table which overflows its containing div. 
我有一个表溢出其包含div。 I want to show all the contents in the table, so the table has to go over 100% width to do so. 我想显示表格中的所有内容，因此表格必须超过100％的宽度。 The problem is the containing div does not reflect the size of its child. 问题是包含div不能反映其子级的大小。 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/ js拨弄这里： http : //jsfiddle.net/GrimRob/qg75arbs/
4 个解决方案
解决方案1
2 2014-09-05 09:02:33
You should consider using table-layout: fixed and some width on the table or cells. 您应该考虑使用table-layout: fixed表格和单元格上的某些宽度。
Relevant CSS: 相关CSS：
table {
table-layout: fixed;
min-width: 960px;
}
table-layout: fixed is the other table layout algorithm where browser stick to what the author (you) want and don't try anymore to adapt dimensions to the content. table-layout: fixed是另一种表格布局算法，浏览器坚持作者（您）想要的内容，不再尝试根据内容调整尺寸。 That works if you've some indication of width wanted, like a min-width : http://jsfiddle.net/qg75arbs/1/ 如果您有想要的宽度指示，例如min-width ： http : //jsfiddle.net/qg75arbs/1/
A simple min-width on table without table-layout: fixed also works, depends on your requirement. 一个没有table-layout: fixed的简单最小宽度表table-layout: fixed也可以，取决于您的要求。
Removing table { word-break: break-all; } 删除table { word-break: break-all; } table { word-break: break-all; } also works, seems strange to allow this while trying to have large cells. table { word-break: break-all; }也可以，在尝试拥有大单元格时允许这样做似乎很奇怪。
解决方案2
1 2014-09-05 08:54:29
<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;
width:100%;
}
.img1 {
min-width:200px;
width:100%;
height:auto;
}
@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" class="img1" alt="trev"></td>
<td>VeryLongBitOfTextVeryLongBitOfText</td>
</tr>
</table>
</div>
</body>
</html>
解决方案3
1 已采纳 2014-09-05 09:00:00
如果您想让表格将包含div的表格推出，请将其添加到您的#content CSS中。
display: table-cell;
解决方案4
0 2014-09-05 08:55:40
I think the problem here is that the table will only shrink down to as small as the content (most of the time) and in this case you will note that each column has got to it's smallest size (1 character width), with a static width image. 我认为这里的问题是，表（在大多数情况下）只会缩小到与内容一样小的大小，在这种情况下，您会注意到每一列都达到了最小的大小（1个字符的宽度），并且静态宽度图像。
In essence, the table element is not really responsive as much as you want and becomes static at a smaller size. 从本质上讲，table元素并没有真正响应您想要的那样，并且在较小的大小时变为静态的。 You can scale the image or hide columns below a certain width but if you do use a table element it will always only shrink down to a certain size. 您可以缩放图像或将列隐藏在特定宽度以下，但是如果您使用表格元素，则始终只会缩小到特定大小。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.