Tables
Responsive, lightweight and pretty.

It is imperative that tables are used for, and only for, tabular data with more than one dimension. Tables should be simple to parse and never be nested.

users

# Name Email Contact Created
1 Britney Spears therealbritney@example.com Ari Gold 3 days ago
2 Britney Spears therealbritney@example.com Ari Gold 3 days ago
3 Britney Spears therealbritney@example.com Ari Gold 3 days ago
4 Britney Spears therealbritney@example.com Ari Gold 3 days ago
5 Britney Spears therealbritney@example.com Ari Gold 3 days ago
6 Britney Spears therealbritney@example.com Ari Gold 3 days ago

Example markup for a slats table

<div class="table-responsive">
  <table class="table table-slats table-cushion table-slats-lg">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Email</th>
        <th>Contact</th>
        <th>Created</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td class="ellipsis">Britney Spears</td>
        <td class="ellipsis">
          <a href="mailto:therealbritney@example.com">therealbritney@example.com</a>
        </td>
        <td class="ellipsis">
          <a href="https://en.wikipedia.org/wiki/Ari_Gold_(Entourage)">Ari Gold</a>
        </td>
        <td class="ellipsis">3 days ago</td>
        <td>
          <div class="text-right">
            <a href="#!" class="btn btn-primary btn-xs">Ohai</a>
          </div>
        </td>
      </tr>
      <!-- -->
    </tbody>
  </table>
</div>
.panel.panel-default.table-responsive .table.table-striped
Awesome Table
Something Neat 12
# Heading Heading Heading Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell

Example markup for a table in a panel

<div class="panel panel-default table-responsive">
  <div class="panel-heading">
    Table
    <div class="pull-right">
      <a href="#" class="label label-primary">Action 1</a>
      <a href="#" class="label label-default">Action 2</a>
    </div>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-lg-6 py1">
        <span class="small">Something Neat</span>
        <span class="badge badge-default">12</span>
      </div>
      <div class="col-lg-6">
        <div class="input-group">
          <input type="text" placeholder="Search..." class="form-control">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button">
              <i class="fa fa-search"></i>
            </button>
          </span>
        </div>
      </div>
    </div>
  </div>
  <table class="table table-striped">
    <thead>
      <!-- ... -->
    </thead>
    <tbody>
      <!-- ... -->
    </tbody>
  </table>
</div>

Tables with buttons

Sometimes you need to add buttons to each row of the table. Make sure you give the <td> element the .text-right class. Also, give each link the .btn-sm class so that it doesn’t make the <tr> too tall.

# Heading Heading Heading Heading Heading
1 Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell

Tables for data display

When it comes to displaying data, it’s important to let it speak for itself. As such, the .data-table ensures that design elements stay out of the way.

This table comes in handy for viewing numeric intensive data like usage statistics, or some other type of raw information. Typically, for data that doesn’t have a hierarchical significance or a reason to incorporate visual cues.

.table.table-data.table-cushion
# Heading Heading Heading Heading Heading Heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell

It’s also important to wrap your table in .table-responsive in order to allow a horizontal scroll for mobile devices.