html - 自动溢出时背景颜色不扩展

Question

我想为 div 设置背景颜色，该 div 是具有 overflow-x auto 的 div 容器的一部分。我不确定需要应用什么样式来允许 div 包装仅在滚动时可见的文本。如果我设置显示: block ；这是将 div 设置为可见的任何内容:

 <div id="container">
        <div class="section">
            <div class="title">First</div>
            <div class="data">
                <table class="table">
                    <tr>
                        <td>
                            First of the rows and all that data
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Second of the rows and all that data
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Third of the rows and all that data
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Fourth of the rows and all that data
                        </td>
                    </tr>
                </table>
            </div>
            <div class="title">Second</div>
            <div class="data">
                <table class="table">
                    <tr>
                        <td>
                            First of the rows and all that data
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Second of the rows and all that data
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Third of the rows and all that data
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Fourth of the rows and all that data
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

(这里的例子 http://jsfiddle.net/u7ah3/1/ )但是，如果我减少#container 宽度(从 400 到 200)，那么当水平滚动时，可以看到 div 没有环绕文本。我尝试使用 display:inline-block 但是当容器比 section block 宽时它不起作用。

谢谢。

Answer 1

为什么不也给 td 设置样式...？

.table, td {
    min-width:300px;
    background:#bbb;
}

此外，您应该在包含的 section divs 上设置 min-width，例如:

.section {
    min-width:300px;
}

JS fiddle :http://jsfiddle.net/SinisterSystems/u7ah3/7/

我相信我对这个问题的理解是正确的。如果我有什么不对，请随时发表评论，我可以提供进一步的帮助。