Tables

Contents

Tables

Heading column Heading column Heading column
Column content Column content Column content
Column content Column content Column content
Column content Column content Column content
<table class="table">
  <thead>
    <tr>
      <th>Heading column</th>
      <th>Heading column</th>
      <th>Heading column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
  </tbody>
</table>

Modifiers

Bordered

Nice rounded and bordered table style meant for standalone use.

Heading column Heading column Heading column
Column content Column content Column content
Column content Column content Column content
Column content Column content Column content
<table class="table table-bordered">
  ...
</table>

Condensed

Cuts the padding in half.

Heading column Heading column Heading column
Column content Column content Column content
Column content Column content Column content
Column content Column content Column content
<table class="table table-condensed">
  ...
</table>

Do Less

More basic styles for the thead and no cell side borders.

Heading column Heading column Heading column
Column content Column content Column content
Column content Column content Column content
Column content Column content Column content
<table class="table table-bordered doless">
  ...
</table>

Hover

Rows that highlight on hover.

Heading column Heading column Heading column
Column content Column content Column content
Column content Column content Column content
Column content Column content Column content
<table class="table table-hover">
  ...
</table>

Striped

Zebra striping rows for better readability.

Heading column Heading column Heading column
Column content Column content Column content
Column content Column content Column content
Column content Column content Column content
<table class="table table-striped">
  ...
</table>

Table row feedback

Feedback class must be added to the <tr>.

Heading column Heading column Heading column
Default Column content Column content
Inactive Column content Column content
Error Column content Column content
Success Column content Column content
Warning Column content Column content
<table class="table table-striped">
  <thead>
    <tr>
      <th>Heading column</th>
      <th>Heading column</th>
      <th>Heading column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Default</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="inactive">
      <td>Inactive</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="error">
      <td>Error</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="success">
      <td>Success</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="warning">
      <td>Warning</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
  </tbody>
</table>