When your website means business.

CSS, Responsive, Tables | Type: CSSResponsive Data Tables

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

HTML
<table>
  <caption>Statement Summary</caption>
  <thead>
    <tr>
      <th scope="col">Account</th>
      <th scope="col">Due Date</th>
      <th scope="col">Amount</th>
      <th scope="col">Period</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Account">Visa - 3412</td>
      <td data-label="Due Date">04/01/2016</td>
      <td data-label="Amount">$1,190</td>
      <td data-label="Period">03/01/2016 - 03/31/2016</td>
    </tr>
    <tr>
      <td scope="row" data-label="Account">Visa - 6076</td>
      <td data-label="Due Date">03/01/2016</td>
      <td data-label="Amount">$2,443</td>
      <td data-label="Period">02/01/2016 - 02/29/2016</td>
    </tr>
    <tr>
      <td scope="row" data-label="Account">Corporate AMEX</td>
      <td data-label="Due Date">03/01/2016</td>
      <td data-label="Amount">$1,181</td>
      <td data-label="Period">02/01/2016 - 02/29/2016</td>
    </tr>
    <tr>
      <td scope="row" data-label="Acount">Visa - 3412</td>
      <td data-label="Due Date">02/01/2016</td>
      <td data-label="Amount">$842</td>
      <td data-label="Period">01/01/2016 - 01/31/2016</td>
    </tr>
  </tbody>
</table>

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; }
}

Reference Links

We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
Accept