Tables

Drop .table onto any plain <table> to get Bootstrap 3's baseline spacing and horizontal dividers, then layer on optional modifier classes for stripes, borders, a hover highlight, tighter padding, contextual row coloring, and a responsive wrapper for narrow screens. Every class below can be combined freely on the same table.

1. Basic Table: .table

The base .table class adds light padding and a horizontal divider between rows — no vertical borders, no stripes, just a clean baseline you build up from.

<table class="table">
  <thead>
    <tr><th>Trail</th><th>Distance</th><th>Difficulty</th></tr>
  </thead>
  <tbody>
    <tr><td>Ridgeline Loop</td><td>4.2 mi</td><td>Moderate</td></tr>
    <tr><td>Cedar Falls Trail</td><td>2.6 mi</td><td>Easy</td></tr>
  </tbody>
</table>

2. Table Modifiers

Four modifier classes, stackable with .table and with each other:

<table class="table table-striped table-bordered table-hover table-condensed">
  <!-- ...rows... -->
</table>

3. Contextual Row and Cell Classes

Apply one of five contextual classes to a <tr> or a <td> to tint just that row or cell — useful for flagging a status without adding a whole extra column of icons.

<tr class="active">...</tr>   // currently selected/hovered look
<tr class="success">...</tr>  // e.g. trail open
<tr class="info">...</tr>     // e.g. informational note
<tr class="warning">...</tr>  // e.g. trail partly closed
<tr class="danger">...</tr>   // e.g. trail closed

4. Responsive Tables: .table-responsive

A wide table can overflow a small screen. Wrap the whole <table> in a <div class="table-responsive"> and the wrapper — not the page — becomes horizontally scrollable below the medium (768px) breakpoint, so the rest of the layout never breaks.

<div class="table-responsive">
  <table class="table table-bordered">
    <!-- ...wide table with many columns... -->
  </table>
</div>

5. Worked Example: TrailMap Trail Comparison Table

A "compare trails" table on TrailMap, with striping and hover for scanability, a bordered edge, a contextual .danger row for a closed trail, and a responsive wrapper since it has several columns.

<div class="table-responsive">
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>Trail</th><th>Distance</th><th>Elevation Gain</th><th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Ridgeline Loop</td><td>4.2 mi</td><td>980 ft</td><td>Open</td></tr>
      <tr><td>Cedar Falls Trail</td><td>2.6 mi</td><td>320 ft</td><td>Open</td></tr>
      <tr class="danger">
        <td>Summit Pass</td><td>7.8 mi</td><td>2,150 ft</td><td>Closed — bridge out</td>
      </tr>
    </tbody>
  </table>
</div>