使表格行的背景延伸到表格边界之外

我目前正在尝试创建一个带有斑马条纹的表格，其中条纹的背景颜色延伸到屏幕的整个长度，但行的实际内容保留在表格的边界内。

更具体地说，我正在使用 Bootstrap，所以我想要的是表行的内容就像它们位于.container.

本质上，我正在尝试创建一个如下所示的表：

<table class="table">
    <tr>
        <div class="container">
            <td>Testing</td>
            <td>Testing</td>
        </div>
    </tr>
    <tr>
        <div class="container">
            <td>Testing</td>
            <td>Testing</td>
        </div>
    </tr>
</table>

...

table, tr {
    width: 100%;
}

tr:nth-child(odd) {
    background-color: #f4f4b4;
}

理想情况下，背景颜色应延伸浏览器窗口的整个长度，但表格的内容应具有居中且固定（尽管会响应变化）的宽度。

然而，这实际上不起作用，因为它是不可能 http://css-tricks.com/using-divs-inside-tables/放置一个div里面一个tr元素。

这是我解决问题的最佳尝试：http://jsfiddle.net/4L4tatk5/3/ http://jsfiddle.net/4L4tatk5/3/

它很接近，但不太有效，因为表中的单元格（以蓝色概述）没有对齐到整齐的列中。我尝试尝试修补不同的display选项tr元素，但除此之外的任何东西display: block会导致.container类实际上被忽略。

解决这个问题的最佳方法是什么？

该代码可在jsfiddle http://jsfiddle.net/4L4tatk5/3/，但作为参考，这是我的 HTML 和 CSS：

HTML

<div class="container control">
    <p>
        This is an example container (outlined in red) to show where the 
        contents of the table should be aligned to. Individual cells are 
        outlined in blue.
    </p>
    <p>
        Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem 
        ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem 
        ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem 
        ipsum lorem ipsum lorem ipsum
    </p>
</div>
<table class="table test">
    <thead>
        <tr class="container">
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr class="container">
            <td>abcdefghijklmnop</td>
            <td>123456789</td>
            <td>foo</td>
        </tr>
    </tbody>
    <tbody>
        <tr class="container">
            <td>kidke,fjgisklmpi</td>
            <td>11</td>
            <td>bar</td>
        </tr>
    </tbody>
    <tbody>
        <tr class="container">
            <td>abcd</td>
            <td>2321</td>
            <td>hello</td>
        </tr>
    </tbody>
    <tbody>
        <tr class="container">
            <td>adsfaldfalke</td>
            <td>0</td>
            <td>world</td>
        </tr>
    </tbody>
</table>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.control {
    border: 1px solid red;
    margin-bottom: 2em;
}

.test {
    overflow-x: auto;
    margin-bottom: 1em;
}

.test thead {
    white-space: nowrap;
    background-color: #e2e7e8;
}

.test table {
    width: 100%;
}

.test thead,
.test tbody,
.test tfoot {
    width: 100%;
}

.test tbody:nth-child(odd) {
    background-color: #f4f4b4;
}

.test tr {
    display: block;
    border: 1px solid red;
}

.test th,
.test td {
    border: 1px solid blue;
}

我不认为container类应该在表内使用。我会把整个桌子放在一个.container并使用伪元素延长条纹。使用默认的table-striped从 bootstrap 来看，它看起来像这样：

.table-striped td:first-child,
.table-striped th:first-child,
.table-striped td:last-child,
.table-striped th:last-child {
   position: relative;
}

.table-striped td:first-child:before,
.table-striped th:first-child:before,
.table-striped td:last-child:after,
.table-striped th:last-child:after {
    content: '';
    position: absolute;
    top: -1px;
    bottom: -2px;
    width: 100vw;
    display: block;
    background: inherit;
    border: inherit;
}
.table-striped td:first-child:before,
.table-striped th:first-child:before {
    right: 100%;
}
.table-striped td:last-child:after,
.table-striped th:last-child:after {
    left: 100%
}

和更新的小提琴：http://jsfiddle.net/4L4tatk5/8/ http://jsfiddle.net/4L4tatk5/8/

请注意，您可能需要更改它100vw（=垂直宽度的100%）到其他一些单位（只是一个高得离谱的9999px或其他）如果您需要支持