twitter-bootstrap Tables Table with advanced styling
Example
Bootstrap provides a couple of classes for advanced table styling.
Striped rows
You will have a table with striped rows, if you add .table-striped class:
<table class="table table-striped">
<thead><tr><th>First Name</th><th>Last name</th></tr></thead>
<tbody>
<tr><td>John</td><td>Doe</td></tr>
<tr><td>Fred</td><td>Bloggs</td></tr>
</tbody>
</table>
Note that:
Striped tables are styled via the
:nth-childCSS selector, which is not available in Internet Explorer 8.
Bordered table
You will have a table with borders on all sides of the table and cells, if you add .table-bordered class:
<table class="table table-bordered">
<thead><tr><th>First Name</th><th>Last name</th></tr></thead>
<tbody>
<tr><td>John</td><td>Doe</td></tr>
<tr><td>Fred</td><td>Bloggs</td></tr>
</tbody>
</table>
Hover on rows
If you add .table-hover class, you will have a table with highlighted rows when the user hovers over a row:
<table class="table table-hover">
<thead><tr><th>First Name</th><th>Last name</th></tr></thead>
<tbody>
<tr><td>John</td><td>Doe</td></tr>
<tr><td>Fred</td><td>Bloggs</td></tr>
</tbody>
</table>
Condensed table
If you add .table-condensed class, the default cell padding will be cut in half, so you will have a more compact table:
<table class="table table-hover">
<thead><tr><th>First Name</th><th>Last name</th></tr></thead>
<tbody>
<tr><td>John</td><td>Doe</td></tr>
<tr><td>Fred</td><td>Bloggs</td></tr>
</tbody>
</table>
Contextual classes
Bootstrap tables support contextual colors. To change background color of a table row or cell you just have to add one of the following contexual classes: .active, .success, .info, .warning, .danger
<table class="table">
<thead><tr><th>First Name</th><th>Last name</th></tr></thead>
<tbody>
<tr class="success"><td>John</td><td>Doe</td></tr>
<tr><td>Fred</td><td class="info">Bloggs</td></tr>
</tbody>
</table>
