2 Tables

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

2.1 Table styles

Add any of the following classes to the .table base class.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

.table-striped

Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-8).

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

.table-bordered

Add borders and rounded corners to the table.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

.table-hover

Enable a hover state on table rows within a <tbody>.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

.table-condensed

Makes tables more compact by cutting cell padding in half.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table class="table {$modifiers}">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

2.2 Backgrounds

Use contextual classes to color table rows.

#	Product	Payment Taken	Status
1	TB - Monthly	01/04/2012	Approved
2	TB - Monthly	02/04/2012	Declined
3	TB - Monthly	03/04/2012	Pending
4	TB - Monthly	04/04/2012	Call in to confirm

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Product</th>
      <th>Payment Taken</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr class="success">
      <td>1</td>
      <td>TB - Monthly</td>
      <td>01/04/2012</td>
      <td>Approved</td>
    </tr>
    <tr class="error">
      <td>2</td>
      <td>TB - Monthly</td>
      <td>02/04/2012</td>
      <td>Declined</td>
    </tr>
    <tr class="warning">
      <td>3</td>
      <td>TB - Monthly</td>
      <td>03/04/2012</td>
      <td>Pending</td>
    </tr>
    <tr class="info">
      <td>4</td>
      <td>TB - Monthly</td>
      <td>04/04/2012</td>
      <td>Call in to confirm</td>
    </tr>
  </tbody>
</table>