I am doing some basic styling of a table in bootstrap and turn the cell borders dark blue. Nothing fancy and a completely standard table but I cant for the life of me work out how to style the border between the table head and table body. I have tried everything to get this line to look the same as everything else.
Can anyone tell me how to create a bootstrap table with borders on the cells that are not gray. My table is also responsive but that seems to make little difference
.table td, .table th {
border: 1px solid #2980B9;
}
.table{
border: 1px solid #2980B9;
}
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>1</th>
<th>Table cell</th>
<th>Table cell</th>
<th>Table cell</th>
<th>Table cell</th>
<th>Table cell</th>
<th>Table cell</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>2</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>3</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
You should use the selectors that bootstrap uses like so: http://jsfiddle.net/4tdS2
Your css could look something like this:
.table { border: 1px solid #2980B9; }
.table thead > tr > th { border-bottom: none; }
.table thead > tr > th, .table tbody > tr > th, .table tfoot > tr > th, .table thead > tr > td, .table tbody > tr > td, .table tfoot > tr > td { border: 1px solid #2980B9; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With