Css – How to change the background-color of the whole row when thead row has less columns than tbody rows

csscss-selectorshtml-table

I'm wondering how can I have the same width for all the rows in the table?
As you can see in the page…I want to change the background color of the header but the header doesnt have the same width as the element in the body.
How can I have the same width for all the rows so the background color covers the whole width?
Thanks!

http://jsbin.com/ucafeh/1/

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <!-- the dark background has to cover the whole width of the second row...-->
       <table class="table table-striped">
                <thead>
                <tr>
                    <th>Date</th>
                    <th>hl</th>
                    <th>Invoice</th>
                    <th>fefe</th>
                    <th>fefefef</th>
                    <th>fe VAT</th>
                    <th>C. dfgdf VAT</th>
                    <th>dfgdf</th>

                </tr>
                </thead>
          <tbody>
            <tr>
                <th><a class="inData" href="">17.17.17</a></th>
                <th><a class="inData" href="">50123</a></th>
                <th><a class="inData" href="">Invoice</a></th>
                <th><a class="inData" href="">Hola seƱor</a></th>
                <th><a class="inData" href="">-123.00</a></th>
                <th><a class="inData" href="">111</a></th>
                <th><a class="inData" href="">1200</a></th>
                <th><a class="inData" href="">GSP</a></th>
                <th><a class="deleteItem" href="#"><img src="" alt=""/>item</a></th>
                <th><a href="#myModal" role="" class="" data-toggle="modal">last-item</a></th>

            </tr>

Best Answer

Can you simply add 2 empty th elements before the closing tr tag inside thead (see this example: http://jsbin.com/iduxem/1)?

Then you could use the following simple CSS...

.table thead th { 
  background-color: green;
}
Related Topic