Responstable 1.0: a responsive table solution

readme.markdown

Responstable 1.0

A responsive table solution

Responstable is a CSS solution for responsive tables. It uses the HTML5 attribute data-th and the pseudo :before to create a alternate column header when in mobile view. Because it is designed mobile first you will need the respond.js (https://github.com/scottjehl/Respond) to make it work with IE8 (and below).

A Pen by Jordy van Raaij on CodePen.

License.

Looking for a slightly different solution? Please check out Responstable 2.0!

responstable.html

<h1>Responstable <span>1.0</span> by <span>jordyvanraaij</span></h1>

<table class="responstable">
  
  <tr>
    <th>Main driver</th>
    <th>First name</th>
    <th>Surname</th>
    <th>Date of birth</th>
    <th>Relationship</th>
  </tr>
  
  <tr>
    <td data-th="Main driver"><input type="radio"/></td>
    <td data-th="First name">Steve</td>
    <td data-th="Surname">Foo</td>
    <td data-th="Date of birth">01/01/1978</td>
    <td data-th="Relationship">Policyholder</td>
  </tr>
  
  <tr>
    <td data-th="Main driver"><input type="radio"/></td>
    <td data-th="First name">Steffie</td>
    <td data-th="Surname">Foo</td>
    <td data-th="Date of birth">01/01/1978</td>
    <td data-th="Relationship">Spouse</td>
  </tr>
  
  <tr>
    <td data-th="Main driver"><input type="radio"/></td>
    <td data-th="First name">Stan</td>
    <td data-th="Surname">Foo</td>
    <td data-th="Date of birth">01/01/1994</td>
    <td data-th="Relationship">Son</td>
  </tr>
  
  <tr>
    <td data-th="Main driver"><input type="radio"/></td>
    <td data-th="First name">Stella</td>
    <td data-th="Surname">Foo</td>
    <td data-th="Date of birth">01/01/1992</td>
    <td data-th="Relationship">Daughter</td>
  </tr>
  
</table>

responstable.scss

@import "compass";
/* 
  RESPONSTABLE 1.0 by jordyvanraaij
     Designed mobile first! 
*/

// Default options for table style
$table-breakpoint: 480px;
$table-background-color: #FFF;
$table-text-color: #024457;
$table-outer-border: 1px solid #167F92;
$table-cell-border: 1px solid #D9E4E6;

// Extra options for table style (parse these arguments when including your mixin)
$table-border-radius: 10px;
$table-highlight-color: #EAF3F3;
$table-header-background-color: #167F92;
$table-header-text-color: #FFF;
$table-header-border: 1px solid #FFF;

// The Responstable mixin

@mixin responstable(
  $breakpoint: $table-breakpoint,
  $background-color: $table-background-color,
  $text-color: $table-text-color,
  $outer-border: $table-outer-border,
  $cell-border: $table-cell-border,
  $border-radius: none,
  $highlight-color: none,
  $header-background-color: $table-background-color,
  $header-text-color: $table-text-color,
  $header-border: $table-cell-border) {

  .responstable {
    margin: 1em 0;
    width: 100%;
    background: $background-color;
    color: $text-color;
    border-radius: $border-radius;
    border: $outer-border;
    overflow: hidden;
  
    tr {
      border-top: $outer-border;
      border-bottom: $outer-border;
      &:nth-child(odd) {  
        background-color: $highlight-color;
      }  
    }
  
    th {
      display: none; // hide the table headers for mobile
      border: $header-border;
      background-color: $header-background-color;
      color: $header-text-color;
    }
  
    td {
      display: block; // display the table as a block element for mobile   
      &:first-child {
        padding-top: .5em;
      }
      &:last-child {
        padding-bottom: .5em;
      }
      &:before {
        content: attr(data-th)": "; // grab the headers from the data-th and put them before every table cell for mobile
        font-weight: bold;
        width: 8em;
        display: inline-block;       
        @media (min-width: $breakpoint) {
          display: none; // do not display the data-th for desktop
        }
      }
      @media (min-width: $breakpoint) {
        border: $cell-border;
      }
    }
  
    th, td {
      text-align: left;
      margin: .5em 1em;  
      @media (min-width: $breakpoint) {
        display: table-cell; // turn the table into a 'normal' table-cell for desktop
        padding: 1em;
        &:first-child {
          text-align: center;
        }
      }
    }  
  }
}

// Include the mixin (with extra options as overrides)

@include responstable(
  $border-radius: $table-border-radius,
  $highlight-color: $table-highlight-color,
  $header-background-color: $table-header-background-color,
  $header-text-color: $table-header-text-color,
  $header-border: $table-header-border);

// General styles

body {
  padding: 0 2em;
  font-family: Arial, sans-serif;
  color: #024457;
  background: #f2f2f2;
}

h1 {
  font-family: Verdana;
  font-weight: normal;
  color: #024457;
  span {color: #167F92;}
}