溢出-x 螺丝 div 的背景颜色

Question

在父 div 中使用overflow-x 时，该父div 的背景色将仅用于最初可见的区域，对于隐藏/滚动可用部分则不会。

http://jsfiddle.net/23yEz/5/

我希望“行”分类的 div 到处都有适当的背景（绿色、蓝色）。

    .row:nth-child(odd)
{
    background-color: green;    
}

.row:nth-child(even)
{
    background-color: blue;    
}

.col
{
    display: table-cell;
    width: 200px;
    min-width: 200px;
}

.col2
{
    display: table-cell;
    width: 400px;
    min-width: 400px;
}

    <div style="overflow-x: auto; background-color: red; margin-top: 50px">
    <div class="row">
        <div class="col">text 1</div>
        <div class="col">text 2</div>
        <div class="col">text 3</div>
        <div class="col">text 4</div>
        <div class="col">text 5</div>
        <div class="col">text 6</div>
        <div class="col">text 7</div>
    </div>
    <div class="row">
        <div class="col2">Row2 Cell 1</div>
        <div class="col2">Row2 Cell 2</div>
        <div class="col2">Row2 Cell 3</div>
        <div class="col2">Row2 Cell 4</div>
        <div class="col2">Row2 Cell 5</div>
        <div class="col2">Row2 Cell 6</div>
        <div class="col2">Row2 Cell 7</div>
    </div>
    <div class="row">
        <div class="col2">Row3 Cell 1</div>
        <div class="col2">Row3 Cell 2</div>
        <div class="col2">Row3 Cell 3</div>
        <div class="col2">Row3 Cell 4</div>
        <div class="col2">Row3 Cell 5</div>
        <div class="col2">Row3 Cell 6</div>
        <div class="col2">Row3 Cell 7</div>
    </div>
    <div class="row">
        <div class="col2">Row4 Cell 1</div>
        <div class="col2">Row4 Cell 2</div>
        <div class="col2">Row4 Cell 3</div>
        <div class="col2">Row4 Cell 4</div>
        <div class="col2">Row4 Cell 5</div>
        <div class="col2">Row4 Cell 6</div>
        <div class="col2">Row4 Cell 7</div>
    </div>
</div>

Answer 1

将overflow:auto 添加到.row 以恢复您寻求的行为。

.row {
    background-color: green;
    overflow:auto;
}

jsFiddle example