Responsive Tables

Details

Any <table> on the site has CSS overrides to make it respond in smaller views. In order to keep your tables readable, there are a number of things you need to do.

  1. Never use tables for layout. This will break in smaller views. If you must use them for layout you will need to add the class "no-mobile-table" to each <table>.
  2. Add a special, hidden <span> element to the front of each td so that when it collapses down it is still readable.
  3. Never use a height on any element in a responsive table. Use padding and margins if you need addtional room.
  4. Never use a width anywhere but the <table> tag and even then stick to 95%-100%. Otherwise the mobile table may look strange.
  5. Always check your tables on all sizes and devices. This includes tablets, phones, and all browsers.

Live Example

Shrink the page to see this table respond.

Title Title 2 Title 3
Title: {content} Title 2: {content} Title 3: {content}

Code

<table cellpadding="1" cellspacing="0" width="100%">
  <tbody>
    <tr class="table-head">
       <th>Title</th>
       <th>Title 2</th>
       <th>Title 3</th>
    </tr>
    <tr>
      <td><span class="table-head-mobile th-1">Title: </span>{content}</td>
      <td><span class="table-head-mobile th-2">Title 2: </span>{content}</td>
      <td><span class="table-head-mobile th-3">Title 3: </span>{content}</td>
    </tr>
  </tbody>
</table>

Configurables

  • Don't respond: add "no-mobile-table" class to the <table> element to keep the table from breaking down in smaller views.
  • Respond Sooner: add "mobile-table-tablet" class to the <table> element to allow the table to respond at the first/tablet breakpoint - earlier than the less than 768px breakpoint.
  • Extra space: Add an extra bottom padding by adding the class "last" to the final <td> in a row.
  • Headline: The class "headline" can be added to any td to make it stand out.