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.

  <caption>Statement Summary</caption>
      <th scope="col">Account</th>
      <th scope="col">Due Date</th>
      <th scope="col">Amount</th>
      <th scope="col">Period</th>
      <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>
      <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>
      <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>
      <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>

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.