Last Updated: June 01, 2018
· gursesl

Want Responsive Tables? Quit Using Tables

I recently worked on a small project that involved presenting tabular data for a range of devices from laptop to tablets, to smartphones. One issue that came up was presenting the results in a responsive way for all devices.

My toolset was Node, Express, Bootstrap and Angular.

Bootstrap provides a table classes to style responsive tables table table-striped table-responsive.

Using these styles and Angular's ng-repeat directive I created the following results table:

<table class="table table-striped table-responsive" id="resultset">
          <tr ng-repeat="repo in | filter: search | filter: size | orderBy:orderProp">

This works, but not as responsive as it should. It fails to properly scale on tablets and generally is a somewhat restrictive way to display results.

So, I refactored it into a series of rows and columns, allowing Bootstrap's grid system to do the heavy lifting. Here is how the refactored version looks:

<div id="resultset" class="row" ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat="repo in | filter: search | filter: size | orderBy:orderProp">
      <div class="col-sm-2"><strong>{{}}</strong></div>
      <div class="col-sm-6">{{repo.description}}</div>
      <div class="col-sm-1"><p class="text-right">{{repo.size}}</p></div>
      <div class="col-sm-1"><p class="text-right">{{repo.forks_count}}</p></div>
      <div class="col-sm-1"><p class="text-right">{{repo.watchers_count}}</p></div>
      <div class="col-sm-1"><p class="text-right">{{repo.open_issues}}</p></div>

This design relies on a series of DIVs and it offers a noticeably better mobile experience and responsiveness. Angular provides the ng-class-odd and ng-class-even directives to help styling the table. I used col-sm- to support smaller screens, but there are also col-md- and col-lg- classes for larger displays.

4 Responses
Add your response

Can u provide plnkr or fiddle?

over 1 year ago ·

This looks nice, but isn't it terrible for accessibility (e.g., screen readers) since it removes the built-in markup contexts of columns and headers and such?

over 1 year ago ·

It is possible to still use tables to display tabular data (which is the point of semantic content). See this demo:

over 1 year ago ·

This is not a clever innovation as much as it is simply failing to use the correct markup. Rather than have your tables as div's in markup you should change the display property of your table cells to be block, or however you want them to be displayed, when you are on mobile. This is possible with the most basic of media queries.

over 1 year ago ·