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!
<!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 closingtr
tag insidethead
(see this example: http://jsbin.com/iduxem/1)?Then you could use the following simple CSS...