Responsive Tables

Page

Tabular data is best displayed in HTML tables, but sometimes large tables do not fit on small screens making the table information unreadable. Suitcase Interim makes tables responsive so the layout of the tables adapt to small screens.

View a responsive table demo.

How?

When content creators add tables to their pages, news articles, or other types of content, Suitcase Interim automatically detects the table and makes it responsive. 

Site administrators also have the option to configure tables created with Views responsive. Read the documentation on the Suitcase Interim git hub to find out how. 

Accessibility

  • Responsive tables maintain the same HTML semantic mark-up that screen readers can recognize.
  • Responsive tables maintain the relationship between row and column headings
  • This responsive table solution has a fallback for when browsers don't have javascript enabled.

Best practices for tables

  • Only tabular data is appropriate for tables. Avoid using tables for page layouts.
  • Be sure to use table headings to label rows and/or columns so the relationship of the data is clear.