css - Expand table background-color inside div -

i have table inside div.
code: https://jsfiddle.net/2cg29xlc/

html

<div> <table>     <thead>         <!-- example 2 columns -->         <tr>             <th>col1</th>             <th>col2</th>         </tr>     </thead>     <tbody>         <tr>             <td>foo</td>             <td>this</td>         </tr>         <tr>             <td>bar</td>             <td>that</td>         </tr>     </tbody> </table> 

css

div {     width: 99%; } table {     border-top: 2px solid #000;     border-bottom: 2px solid #000; } thead tr:nth-child(odd) {     background-color: #ffc0cb; } tbody tr:nth-child(even) {     background-color: #ffc0cb; } 

my situation:
want expand table's background-color , border match div's width.
this: https://jsfiddle.net/2cg29xlc/7/

my headache:
can't set table's width: 99%
because design require columns have own width , column stay on left.

i came across make background table rows extend past bounds of table
can't work code, maybe because don't use bootstrap.

any appreciated.

from understand, want last column fill remaining space of table, correct? in case, can target last column , apply 100% width code below :

th:last-child{     width:100%;     text-align:left; } 

and here's fiddle : https://jsfiddle.net/xundqddc/1/