Skip to content

Responsive Tables

Jump to bottom
sacarney edited this page Jun 12, 2017 · 2 revisions

Some tables become difficult to read on smaller screens because there isn't enough horizontal space to accommodate all columns. Suitcase Interim detects a few different table types and then applies CSS and jQuery to change their look and layout to be more legible in a single column.

What kind of tables

This responsive table solution uses jQuery to detect a table's structure:

  • No headings in the table
  • Headings are in the first row
  • Headings are in the first column
  • There are headings in first row and first column

Each of these tables requires a slightly different responsive solution.

Responsive tables in content

Tables in node content automatically receive responsive table styles.

Tables created by Views

Tables created in Views are not responsive by default. If a Views table would benefit from being responsive, add the class `views-table-responsive' to the View.

  1. Edit the View
  2. Add the views-table-responsive class in CSS Class under the Advanced tab

Overflow

Some tables are too wide for even very wide themes. To allow the table to scroll horizontally, add the 'views-table-overflow' class.

  1. Edit the View
  2. Add the views-table-overflow class in the CSS under the Advanced tab. Both this class and the views-table-responsive class can be applied to the same table
Clone this wiki locally