Question

我有一个溢出其包含div的表。我想显示表中的所有内容，因此表必须超过100％才能这样做。问题是包含div不反映其子的大小。我在这里有一个例子，它是一个响应式页面，但问题只发生在低宽度 - 高宽度时它很好。

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

Answer 1

您应该考虑在表格或单元格上使用table-layout: fixed和一些宽度。

相关CSS：

table {
    table-layout: fixed;
    min-width: 960px;
}

table-layout: fixed是其他表格布局算法，其中浏览器坚持作者（您）想要的内容并且不再尝试使尺寸适应内容。如果您想要一些宽度指示，例如min-width：http://jsfiddle.net/qg75arbs/1/

没有table-layout: fixed的桌面上的简单最小宽度也可以使用，具体取决于您的要求。

删除table { word-break: break-all; }也有效，在尝试使用大型单元时允许这样做似乎很奇怪。

Answer 2

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

Answer 3

如果您希望表格推出包含div，请将其添加到#content css。

display: table-cell;

Answer 4

我认为这里的问题是表格只会缩小到内容的大小（大部分时间），在这种情况下，您会注意到每列都达到了最小的尺寸（1字符宽度），带有静态宽度图像。

从本质上讲，table元素并不像你想要的那样真正响应，而是以较小的尺寸变为静态。您可以缩放图像或隐藏某个宽度以下的列，但如果使用表格元素，它将始终缩小到一定的大小。

在HTML中包含div的表溢出

4 个答案: