Tables

Responsive Tables

Add data-table="responsive" to make any table responsive, resize the window to see the behavior.

Product Name	Format	Price
	Total:	$171.10
Star Wars: The Complete Saga (Episodes I-VI)	Blu-ray	$84.96
Guardians of the Galaxy	Blu-ray 3D	$26.96
Interstellar	Blu-ray	$19.99
American Sniper	DVD	$14.24
Spirited Away	Blu-ray + DVD	$24.95

HTML


    <table data-table="responsive">
      <thead>
        <tr>
          <th>Product Name</th>
          <th>Format</th>
          <th>Price</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td></td>
          <td><strong>Total:</strong></td>
          <td><strong>$171.10</strong></td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Star Wars: The Complete Saga (Episodes I-VI)</td>
          <td>Blu-ray</td>
          <td>$84.96</td>
        </tr>
        <tr>
          <td>Guardians of the Galaxy</td>
          <td>Blu-ray 3D</td>
          <td>$26.96</td>
        </tr>
        ...
      </tbody>
    </table>

Striped Tables

Add data-table="striped" to decorate even rows with background color.

Product Name	Format	Price
	Total:	$171.10
Star Wars: The Complete Saga (Episodes I-VI)	Blu-ray	$84.96
Guardians of the Galaxy	Blu-ray 3D	$26.96
Interstellar	Blu-ray	$19.99
American Sniper	DVD	$14.24
Spirited Away	Blu-ray + DVD	$24.95

HTML


    <table data-table="striped responsive">
      <thead>
        <tr>
          <th>Product Name</th>
          <th>Format</th>
          <th>Price</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td></td>
          <td><strong>Total:</strong></td>
          <td><strong>$171.10</strong></td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>Star Wars: The Complete Saga (Episodes I-VI)</td>
          <td>Blu-ray</td>
          <td>$84.96</td>
        </tr>
        <tr>
          <td>Guardians of the Galaxy</td>
          <td>Blu-ray 3D</td>
          <td>$26.96</td>
        </tr>
        ...
      </tbody>
    </table>