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

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

但是，由于not possible将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内，并使用伪元素延长条纹。使用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的样式。

我必须离开工作，但是当我回到家时，我会再次尝试使用以下方法：在之前和之后：

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

2 个答案: