skip to main content

Ryan Hettler

Incorporate Tables in a Responsive Design

April 12, 2015

There are several ways to incorporate tables in a responsive design. In this article, CSS is strictly used to style and revamp the data within the tables.

Bootstrap

If you using the bootstrap framework, it’s as easy as wrapping the table inside of a div:

<div class="table-responsive">
 <table class="table">
 ...
 </table>
</div>

CSS to the Rescue

Reorganize your table data to fit inside a responsive design with this css code:

@media screen and (max-width: 600px) {
    table td:before {
    content: attr(data-label);
    float: left;
    text-transform:uppercase;
    font-weight: bold;
  }
}

Make sure your html has table headers and data-label for each table column:

<table>
 <thead>
 <tr>
 <th>Thieves Guild Member</th>
 <th>Sneak Skill Level</th>
 <th>Pickpocketing Skill Level</th>
 <th>Illusion Spell Skill Level</th>
 <th>Alchemy Skill Level</th>
 <th>Lockpicking Skill Level</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td data-label="Thieves Guild Members">Brynjolf</td>
 <td data-label="Sneak Skill Level">88</td>
 <td data-label="Pickpocketing Skill Level">76</td>
 <td data-label="Illusion Spell Skill Level">56</td>
 <td data-label="Alchemy Skill Level">84</td>
 <td data-label="Lockpicking Skill Level">66</td>
 </tr>
 <tr>
 <td data-label="Thieves Guild Members">Delvin</td>
 <td data-label="Sneak Skill Level">89</td>
 <td data-label="Pickpocketing Skill Level">56</td>
 <td data-label="Illusion Spell Skill Level">56</td>
 <td data-label="Alchemy Skill Level">84</td>
 <td data-label="Lockpicking Skill Level">43</td>
 </tr>
 <tr>
 <td data-label="Thieves Guild Members">Vex</td>
 <td data-label="Sneak Skill Level">77</td>
 <td data-label="Pickpocketing Skill Level">56</td>
 <td data-label="Illusion Spell Skill Level">66</td>
 <td data-label="Alchemy Skill Level">72</td>
 <td data-label="Lockpicking Skill Level">78</td>
 </tr>
 </tbody>
</table>

Quick Tips

If combining bootstrap framework and this pure css solution, make sure to double check:

  • That your thead is hidden when device or browser size is under the mobile breaking point – use display:none in your CSS. The mobile breaking point for bootstrap is set at 768 pixels; however, this is a variable that can easily change.
  • Consider using the title attribute in lieu of the data-label. If you go this route, change the CSS content property to: 
    @media screen and (max-width: 600px) {
    table td:before {
    content: attr(title);
    float: left;
    text-transform:uppercase;
    font-weight: bold;
  }
}

Resources