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

我目前正在尝试创建一个带有斑马条纹的表格，其中条纹的背景色延伸整个屏幕，但行的实际内容保持在表格的范围内

更具体地说，我使用的是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;
}

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;
}

---

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

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

项目1
项目2
项目3
项目4
项目5
项目6

---

我想更简单的解决方案是只使用

容器，每行有一个表

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

项目1
项目2
项目3
项目1
项目2
项目3

上述方法的缺点是显而易见的。无论如何都不是动态的，所以如果这个数据是动态生成的，这绝对是不可能的。除此之外，它是臃肿的，没有语义，但您不必将

的

设置为

显示：块

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


我必须离开工作，但我会在回家后再尝试一下，看看我是否能想出一些神奇的方法，使用：before和：after
我不认为
container
类应该在表中使用。我只需将整个表放在
容器中
，并使用伪元素延长条纹。使用从引导中剥离的默认
表
，看起来如下所示：

.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%
}

和最新的小提琴：

请注意，如果您需要支持，您可能必须将
100vw
（=垂直宽度的100%）更改为其他单位（仅高得离谱的
9999px
或其他什么），您是否知道引导中的
.table striped
类@是的，但是如果我添加这个类，背景色不会拉伸屏幕的整个长度，只会拉伸桌子的整个长度。如果我让表格延伸屏幕的整个长度，那么表格的内容就不会像在容器中一样对齐。@PeterVR我不认为他的问题是创建条纹，这是因为他希望条纹延伸到桌子本身的边界之外。你认为“像在容器中一样对齐”是什么意思？@PeterVR-我认为迈克尔比我更简洁地概括了我想要完成的任务。我已经编辑了我的问题，试图澄清。你永远不应该改变你的标记来实现某种样式。标记应该是语义的，外观应该完全通过css完成。我知道你基本上已经自己说过了，但我认为这还不够紧张@彼得-绝对，你的方法绝对是更好的方法。然而，我将注意到，嵌套表在技术上是语义的。在一个单元格中需要多个分区或行并不少见。按照我建议的方式使用它将被认为是不具有语义的，因为它使用tables元素是为了实现某种布局和设计。数据不需要这样做。我最终对代码进行了一些调整，以更好地适应我的具体情况，但使用before/after伪类的概念正是我所需要的。这正是我要做的，但你在我下班前就做了。绝对是最好的解决方案。你有没有想出一种方法来防止父级上的溢出-x滚动？我不想设置最大宽度，也想不出其他方法来设置它。@Carson您可以在表的父项（本例中为.container）中添加一个
溢出：隐藏的

.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%
}