rvi41a
Last Updated: June 01, 2018
·
6.193K
· gursesl
29eb317d68143e49df5ce475c2b798ca

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 username.lr | filter: search | filter: size | orderBy:orderProp">
            <td>{{repo.name}}</td>
            <td>{{repo.description}}</td>
            <td>{{repo.size}}</td>
            <td>{{repo.forks_count}}</td>
            <td>{{repo.watchers_count}}</td>
            <td>{{repo.open_issues}}</td>
          </tr>
 </table>

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 username.lr | filter: search | filter: size | orderBy:orderProp">
      <div class="col-sm-2"><strong>{{repo.name}}</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>
</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.

Say Thanks
Respond

4 Responses
Add your response

16270
8e304a69559a3cc7ee0536d4e80be417 normal

Can u provide plnkr or fiddle?

over 1 year ago ·
23259

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 ·
23312
7042164ecb9e654c9723ef130012360e

It is possible to still use tables to display tabular data (which is the point of semantic content). See this demo: http://codepen.io/peiche/details/zvwERd/

over 1 year ago ·
29957

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.

28 days ago ·