Make background for table rows extend past the bounds of the table

Question

I'm currently trying to create a table with zebra striping where the background color for the stripes stretches the full length of the screen but the actual contents of the row stay within the bounds of the table.

More specifically, I'm using Bootstrap, so what I'd like is for the contents of the table row act as if they're inside a .container.

In essence, I'm trying to create a table which acts like the following:

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

Ideally, the background color should extend the full length of the browser window, but the contents of the table should have a centered and fixed (though responsively changing) width.

However, this doesn't actually work since it's not possible to place a div inside a tr element.

This was my best attempt at solving the problem: http://jsfiddle.net/4L4tatk5/3/

It comes close, but doesn't quite work because the cells in the table (outlined in blue) don't align into tidy columns. I tried experimenting with tinkering with different display options for tr elements, but anything other then display: block will cause the .container class to effectively be ignored.

What is the best way to solve this problem?

---

The code is available on jsfiddle, but for reference, here's my HTML and 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

I don't think container class is meant to be used inside tables. I would just place the entire table inside a .container and lengthen the stripes using pseudo elements. With the default table-striped from bootstrap, that would look something like this:

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

And the updated fiddle: http://jsfiddle.net/4L4tatk5/8/

Note that you may have to change that 100vw (= 100% of vertical width) to some other unit (just a ridiculously high 9999pxor something) if you need to support

Answer 2

The only other way I can see doing this is to use nested tables...

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

---

I suppose an even simpler solution would be to just use <div> containers with a table for each row...

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

The disadvantages of the above are obvious. Not dynamic by any means, so if this data is being generated dynamically, this is definitely a no go. Beyond that it's bloated and not semantic, but you don't have to mess with setting the <tr>'s to display: block;

In any case I think you can see what you would do with the above, limit the width of the inner tables, and extend the width of the containing elements to 100%, style the containing elements and tada.

---

I have to leave work, but I will take another stab at this when I get home to see if I can't come up with some magic using :before and :after