twitter-bootstrap 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-child CSS 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>