Responsive Tables

Tables are used for displaying tabular data.

Tables can be quite wide, with multiple columns of text that looks bad when squished, or can't be shrunk below a minimum size.

Horizontal scrolling

When a table is wider than the screen, it can become inaccessible or break the layout.

One way to fix this is to allow the table to scroll horizontally within it's container.

Responsive Table Filter module does this for WYSIWYG content: https://www.drupal.org/project/responsive_table_filter.

Since it's a text filter, you need to add it to your text format configuration and then it will wrap tables in the content with a scrolling wrapper.

You can add the .responsive-figure-table class to a view to make it scroll.

Other tables in Drupal are rendered with the Table render element.

You could add the same wrapper and library to make these tables scroll with a preprocess hook or table template override.

If a table is hand coded somewhere, like in a template, it will need the wrapper and library added as well.

This module is easy to incorporate in your own theme code, but the text filter is handy to add the wrapper.

Table collapse

On mobile screens, a scrolling table may be too wide to effectively read.

The tablesaw js library is used for collapsing tables into a single column, with the table header as a a label for each row.

Responsive Tables Filter (with an s) can set this up for WYSIWYG and other tables, as long as the markup is correct.

One caveat is that all tables need a <thead> or else they will break the script. That is not automatically added to tables in content, but can be done in the table editor.

I had a case where we didn't want a table header, but needed it for tablesaw, so I just added a .hidden class and it still worked.

In a views table, adding field labels will create the <thead>.

Drupal Responsive Tables

Hide lower priority columns.

https://www.drupal.org/node/1796238