This leverages the Filament Group's Tablesaw approach to responsive tables:

It makes the following tables responsive:

Compatibility

  • This module is compatible with PHP 5.4+ and PHP 7.0

When should you use this module with Drupal 8?

Drupal 8 core does allow for tables to be responsive, but content editors must manually define what priority each table row should be, and must manually add classes to HTML markup in WYSIWYG fields. This module does a best effort at automating this (at the cost fine-grained control). If your site's content editors are not comfortable working with HTML markup, this module is a good fit.

Usage

  1. Enable this module and go to admin/config/content/formats.
  2. Enable the filter "Make tables responsive" on any text formats for which you want to make tables responsive (e.g., Filtered HTML).
  3. Verify the text format(s) allow HTML table tags (see "Limit HTML tags"). All of the following should be allowed:<table> <th> <tr> <td> <thead> <tbody> <tfoot>
  4. If you are using a WYSIWYG toolbar (e.g., CKEditor), verify that its content filtering is not interfering with table styling (see README.txt for more details).
  5. 7.x setting: If you want Views tables to be responsive, enable this at /admin/config/content/responsive_tables_filter (8.x makes Views responsive by default).

Note:WYSIWYG tables will look best visually when you use the <thead> tag for header rows.

Supporting organizations: 
Professional development

Project Information

Downloads