3 #permalink Tables

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

3.1 #permalink Table styles

We've removed the additional bootstrap table styles and made all tables striped, so only use .table or .table-hover.

Examples
Default styling
# First Name Last Name Username
1 Mark Otto mark.otto
2 Jacob Thornton jacob.thornton
3 Larry Bird larry.bird
.table-hover
Enable a hover state on table rows. Add hover effect for tables that have actions for each row, or could do with some additional visual aid.
# First Name Last Name Username
1 Mark Otto mark.otto
2 Jacob Thornton jacob.thornton
3 Larry Bird larry.bird
.table-collapse
A responsive table using data attribute magic.
# First Name Last Name Username
1 Mark Otto mark.otto
2 Jacob Thornton jacob.thornton
3 Larry Bird larry.bird
.table-nolines
Removes all backgroud shading and lines.
# First Name Last Name Username
1 Mark Otto mark.otto
2 Jacob Thornton jacob.thornton
3 Larry Bird larry.bird 
<table class="table [modifier class]">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-th="#">1</td>
      <td data-th="First Name">Mark</td>
      <td data-th="Last Name">Otto</td>
      <td data-th="Username">mark.otto</td>
    </tr>
    <tr>
      <td data-th="#">2</td>
      <td data-th="First Name">Jacob</td>
      <td data-th="Last Name">Thornton</td>
      <td data-th="Username">jacob.thornton</td>
    </tr>
    <tr>
      <td data-th="#">3</td>
      <td data-th="First Name">Larry</td>
      <td data-th="Last Name">Bird</td>
      <td data-th="Username">larry.bird</td>
    </tr>
  </tbody>
</table>

3.2 #permalink Backgrounds

Use contextual classes to color table rows.

Example
# 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>

3.3 #permalink Table with extra elements

Examples
Default styling

Table Title

# Product Payment Taken
TB - Monthly 01/04/2012
Button
TB - Monthly 02/04/2012
Button
TB - Monthly 03/04/2012
Button
TB - Monthly 04/04/2012
Button
.table-extra
Vertical aligns all rows and removes margin from buttons.

Table Title

# Product Payment Taken
TB - Monthly 01/04/2012
Button
TB - Monthly 02/04/2012
Button
TB - Monthly 03/04/2012
Button
TB - Monthly 04/04/2012
Button
.has-title
Adds blue border to top of table, expecting a title to be above it.

Table Title

# Product Payment Taken
TB - Monthly 01/04/2012
Button
TB - Monthly 02/04/2012
Button
TB - Monthly 03/04/2012
Button
TB - Monthly 04/04/2012
Button 
<h4 class="table-title">Table Title</h4>
<table class="table [modifier class]">
  <thead>
    <tr>
      <th>#</th>
      <th>Product</th>
      <th>Payment Taken</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img src="http://lorempixel.com/50/50/"></td>
      <td>TB - Monthly</td>
      <td>01/04/2012</td>
      <td>
	   <div class="btn-row">
	     <a href="#" class="btn btn-primary btn-sm">Button</a>
	   </div>
	 </td>
    </tr>
    <tr>
      <td><img src="http://lorempixel.com/50/50/"></td>
      <td>TB - Monthly</td>
      <td>02/04/2012</td>
      <td>
	   <div class="btn-row">
	     <a href="#" class="btn btn-primary btn-sm">Button</a>
	   </div>
	 </td>
    </tr>
    <tr>
      <td><img src="http://lorempixel.com/50/50/"></td>
      <td>TB - Monthly</td>
      <td>03/04/2012</td>
      <td>
	   <div class="btn-row">
	     <a href="#" class="btn btn-primary btn-sm">Button</a>
	   </div>
	 </td>
    </tr>
    <tr>
      <td><img src="http://lorempixel.com/50/50/"></td>
      <td>TB - Monthly</td>
      <td>04/04/2012</td>
      <td>
	   <div class="btn-row">
	     <a href="#" class="btn btn-primary btn-sm">Button</a>
	   </div>
	 </td>
    </tr>
  </tbody>
</table>

3.4 #permalink Table with nested products

Example

Table Title

Product One Product Two
Package
Product Name Item One Item Two
Outdoor unit
ErP Efficiency Rating Item One Item Two
ErP Efficiency Rating Item One Item Two 
<h4 class="table-title">Table Title</h4>
<table class="table table-technical">
  <thead>
    <tr>
      <th></th>
      <th>Product One</th>
      <th>Product Two</th>
    </tr>
  </thead>
  <tbody>
    <tr class='table-row--blue'>
  <th>
    <strong>Package</strong>
  </th>
  <td data-th="1">
  </td>
  <td data-th="2">
  </td>
</tr>
<tr>
  <tr>
    <th>
  <strong>Product Name</strong>
  </th>
  <td data-th="1">
    Item One
  </td>
  <td data-th="2">
    Item Two
  </td>
</tr>
<tr class='table-row--blue'>
  <th>
    <strong>Outdoor unit</strong>
  </th>
  <td data-th="1" >
  </td>
  <td data-th="2">
  </td>
</tr>
<tr>
    <th>
  <strong>ErP Efficiency Rating</strong>
  </th>
  <td data-th="1" data-attribute="ErP Efficiency Rating">
    Item One
  </td>
  <td data-th="1" data-attribute="ErP Efficiency Rating">
    Item Two
  </td>
</tr>
<tr>
    <th>
  <strong>ErP Efficiency Rating</strong>
  </th>
  <td data-th="1" data-attribute="ErP Efficiency Rating">
    Item One
  </td>
  <td data-th="1" data-attribute="ErP Efficiency Rating">
    Item Two
  </td>
</tr>
  </tbody>
</table>