使表行的背景延伸超出表的边界

Question

我正在尝试创建一个带有斑马条纹的表格,其中条纹的背景颜色会拉伸屏幕的整个长度,但行的实际内容仍然在表格的范围内.

更具体地说,我正在使用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;
}

理想情况下,背景颜色应该扩展浏览器窗口的整个长度,但是表格的内容应该具有居中和固定(但响应性地改变)的宽度.

但是,这实际上并不起作用,因为不可能div在tr元素内部放置.

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

它接近,但不是很有效,因为表格中的单元格(蓝色轮廓)不会对齐整齐的列.我尝试尝试修改元素的不同display选项tr,但其他任何东西display: block都会导致.container有效地忽略该类.

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

---

代码在jsfiddle上可用,但作为参考,这是我的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;
}

Answer 1

我不认为container类是在表内使用的.我只需将整个表放在一个内部.container并使用伪元素延长条纹.使用table-stripedbootstrap 的默认值,看起来像这样:

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

请注意,如果您需要支持,您可能必须将其100vw(= 100%的垂直宽度)更改为其他单位(只是一个非常高9999px或者某种东西)