HTML 中包含 div 的表溢出答案

【问题标题】：Table overflowing containing div in HTMLHTML 中包含 div 的表溢出
【发布时间】：2014-09-05 17:02:33
【问题描述】：

我有一个表溢出其包含的 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 在这里摆弄：http://jsfiddle.net/GrimRob/qg75arbs/

【问题讨论】：

为什么不考虑在内容中使用滚动overflow: scroll;??
你为什么不尝试将图像设置为宽度百分比和高度自动与最小宽度？

标签： html css

【解决方案1】：

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

相关CSS：

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

table-layout: fixed 是 other 表格布局算法，浏览器坚持作者（您）想要的内容，不再尝试调整内容的尺寸。如果你有一些想要的宽度指示，比如min-width：http://jsfiddle.net/qg75arbs/1/

没有table-layout: fixed 的桌子上的简单最小宽度也可以，这取决于您的要求。

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

【讨论】：

是的。打败我。当您有非常大的桌子时，这也是一个非常重要的属性。它阻止所有单元格在整个列中比较彼此的宽度，以确定每个列的理想单元格宽度策略。

【解决方案2】：

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

display: table-cell;

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

本质上，表格元素并没有像您想要的那样真正响应，并且在较小的尺寸下变成静态的。您可以缩放图像或隐藏低于特定宽度的列，但如果您使用表格元素，它总是只会缩小到特定大小。

【讨论】：