使表格行的背景超出表格的边界

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 元素中是not possible。

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

它很接近，但不太有效，因为表格中的单元格（蓝色轮廓）没有对齐到整齐的列中。我尝试为tr 元素修改不同的display 选项，但除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 中，并使用伪元素加长条纹。使用 bootstrap 中的默认 table-striped，它看起来像这样：

.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 或其他单位）

Answer 2

我能看到的唯一其他方法是使用嵌套表...

<table>
   <tr>
      <td>
         <table>
            <tr>
               <td>Item 1</td>
               <td>Item 2</td>
               <td>item 3</td>
            </tr>
         </table>
      </td>
   </tr>
   <tr>
      <td>
         <table>
            <tr>
               <td>Item 4</td>
               <td>Item 5</td>
               <td>item 6</td>
            </tr>
         </table>
       </td>
   </tr>
</table>

---

我想一个更简单的解决方案是只使用<div> 容器，每行都有一个表...

<div class="container odd">
   <table>
      <tr>
         <td>Item 1</td>
         <td>Item 2</td>
         <td>item 3</td>
      </tr>
   </table>
</div>
<div class="container even">
   <table>
      <tr>
         <td>Item 1</td>
         <td>Item 2</td>
         <td>item 3</td>
      </tr>
   </table>
</div>

上述的缺点很明显。无论如何都不是动态的，所以如果这些数据是动态生成的，这绝对是不行的。除此之外，它很臃肿而且没有语义，但您不必将<tr>'s 设置为display: block;

在任何情况下，我认为您可以看到您将如何处理上述内容，限制内部表格的宽度，并将包含元素的宽度扩展到 100%，设置包含元素的样式和 tada。

---

我必须下班，但是当我回到家时，我会再试一次，看看我是否无法使用 :before 和 :after 想出一些魔法