Module Description
Summary
This module makes tables in WYSIWYGs and Drupal Views fit on smaller screens. The Filament Group's Tablesaw technique moves column headers into rows:
It makes the following tables responsive:
* Any tables within fields where Drupal text format filters can be applied
* Views tables
Similar modules
This module should not be confused with responsive_table_filter, which uses a different method to achieve small-device-friendly tables.
When should I this module?
Drupal 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
* Enable this module and go to admin/config/content/formats.
* Enable the filter "Make tables responsive" on any text formats for which you want to make tables responsive (e.g., Filtered HTML).
* 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>
* Select which default table behavior you prefer. See the documentation at https://github.com/filamentgroup/tablesaw#tablesaw . Individual tables can override this default by specifying tablesaw-stack, tablesaw-columntoggle, or tablesaw-swipe as a class on the table tag.
* If you are using a WYSIWYG toolbar (e.g., CKEditor), verify that its content filtering is not interfering with table styling (see the README for more details).
* If you want Views tables to be responsive, enable this at /admin/config/content/responsive_tables_filter
Documentation
https://www.drupal.org/docs/contributed-modules/responsive-tables-filter
Note: WYSIWYG tables look best visually when you use the <thead> tag for header rows.
This module makes tables in WYSIWYGs and Drupal Views fit on smaller screens. The Filament Group's Tablesaw technique moves column headers into rows:
It makes the following tables responsive:
* Any tables within fields where Drupal text format filters can be applied
* Views tables
Similar modules
This module should not be confused with responsive_table_filter, which uses a different method to achieve small-device-friendly tables.
When should I this module?
Drupal 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
* Enable this module and go to admin/config/content/formats.
* Enable the filter "Make tables responsive" on any text formats for which you want to make tables responsive (e.g., Filtered HTML).
* 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>
* Select which default table behavior you prefer. See the documentation at https://github.com/filamentgroup/tablesaw#tablesaw . Individual tables can override this default by specifying tablesaw-stack, tablesaw-columntoggle, or tablesaw-swipe as a class on the table tag.
* If you are using a WYSIWYG toolbar (e.g., CKEditor), verify that its content filtering is not interfering with table styling (see the README for more details).
* If you want Views tables to be responsive, enable this at /admin/config/content/responsive_tables_filter
Documentation
https://www.drupal.org/docs/contributed-modules/responsive-tables-filter
Note: WYSIWYG tables look best visually when you use the <thead> tag for header rows.
Module Link
Project Usage
7515
Security Covered
Covered By Security Advisory
Version Available
Production
Module Summary
This module aims to make tables in WYSIWYGs and Drupal Views fit on smaller screens by using the Tablesaw technique to move column headers into rows, making tables responsive for content editors who may not be comfortable working with HTML markup.
Data Name
responsive_tables_filter