我想为 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 宽时它不起作用。
谢谢。
最佳答案
为什么不也给 td
设置样式...?
.table, td {
min-width:300px;
background:#bbb;
}
此外,您应该在包含的 section divs
上设置 min-width
,例如:
.section {
min-width:300px;
}
JS fiddle :http://jsfiddle.net/SinisterSystems/u7ah3/7/
我相信我对这个问题的理解是正确的。如果我有什么不对,请随时发表评论,我可以提供进一步的帮助。
关于html - 自动溢出时背景颜色不扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21445963/