rvi41a
Last Updated: March 31, 2016
·
5.764K
· 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

3 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 ·