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.