Responsive Data Tables

Brilliant responsive trick for data tables, when you have no choice but to use them.

HTML

  Statement Summary
  
    
      Account
      Due Date
      Amount
      Period
    
  
  
    
      Visa - 3412
      04/01/2016
      $1,190
      03/01/2016 - 03/31/2016
    
    
      Visa - 6076
      03/01/2016
      $2,443
      02/01/2016 - 02/29/2016
    
    
      Corporate AMEX
      03/01/2016
      $1,181
      02/01/2016 - 02/29/2016
    
    
      Visa - 3412
      02/01/2016
      $842
      01/01/2016 - 01/31/2016
    
  


CSS
table { border: 1px solid #ccc; border-collapse: collapse; margin: 0; padding: 0;  width: 100%; table-layout: fixed; }
table caption { font-size: 1.5em; margin: .5em 0 .75em; }
table tr { background: #f8f8f8; border: 1px solid #ddd; padding: .35em; }
table th,
table td { padding: .625em; text-align: center; }
table th { font-size: .85em; letter-spacing: .1em; text-transform: uppercase; }

@media screen and (max-width: 600px) { //use whatever breaks work in your theme
  table { border: 0; }
  table caption { font-size: 1.3em; }
  table thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
  table tr { border-bottom: 3px solid #ddd; display: block; margin-bottom: .625em; }
  table td { border-bottom: 1px solid #ddd; display: block; font-size: .8em; text-align: right;  }
  table td:before {  /* aria-label has no advantage, it won't be read inside a table */
    content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase; }
  table td:last-child { border-bottom: 0; }
}

Statement Summary
Account	Due Date	Amount	Period
Visa - 3412	04/01/2016	$1,190	03/01/2016 - 03/31/2016
Visa - 6076	03/01/2016	$2,443	02/01/2016 - 02/29/2016
Corporate AMEX	03/01/2016	$1,181	02/01/2016 - 02/29/2016
Visa - 3412	02/01/2016	$842	01/01/2016 - 01/31/2016