Ritter Insurance Marketing

Section 9 #Tables
Tables

Default table. Use the table class to get the table styles applied.

Attach any click event directly to the <th> for a larger click target.

These tables are responsive. They get the mobile view below the mobile breakpoint. You need to add the data-label="{th - name}" to the corresponding <td>. See the markup below.

Turn row hover off by adding table--no-hover

Sometimes you don't want a resposive table? just add unresponsive to table

option one option two
Desc Pork Buns Pork Buns
price $5.00 $9.00
qty 5 2

Example:

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Markup: 

<table class="table">
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Company">
        Alfreds Futterkiste
      </td>
      <td data-label="Contact">
        Maria Anders
      </td>
      <td data-label="Country">
        Germany
      </td>
    </tr>
    <tr>
      <td data-label="Company">
        Centro comercial Moctezuma
      </td>
      <td data-label="Contact">
        Francisco Chang
      </td>
      <td data-label="Country">
        Mexico
      </td>
    </tr>
    <tr>
      <td data-label="Company">
        Ernst Handel
      </td>
      <td data-label="Contact">
        Roland Mendel
      </td>
      <td data-label="Country">
        Austria
      </td>
    </tr>
    <tr>
      <td data-label="Company">
        Island Trading
      </td>
      <td data-label="Contact">
        Helen Bennett
      </td>
      <td data-label="Country">
        UK
      </td>
    </tr>
    <tr>
      <td data-label="Company">
        Laughing Bacchus Winecellars
      </td>
      <td data-label="Contact">
        Yoshi Tannamuri
      </td>
      <td data-label="Country">
        Canada
      </td>
    </tr>
    <tr>
      <td data-label="Company">
        Magazzini Alimentari Riuniti
      </td>
      <td data-label="Contact">
        Giovanni Rovelli
      </td>
      <td data-label="Country">
        Italy
      </td>
    </tr>
  </tbody>
</table>
Source: sass/_tables.scss, line 8