One big advantage of building a website with UT Drupal Kit is that, out of the box, your site is fully responsive. Regardless whether it’s viewed on a desktop, tablet, or smart phone, content fits intelligently to the screen width.
To qualify as fully responsive, that means that tables also need to fit. This is no straightforward task. How, for example, should the following table fit into a portrait-oriented phone display and still be readable?
There are a number of approaches that tackle this challenge. The design firm behind the homepage redesign, Springbox, selected the Filament Group‘s “Tablesaw” approach, and when we set out to build a Drupal distribution for the UT community, we concurred with that decision.
And here’s the responsiveness in action:
When we implemented this approach in the Kit, we wanted to give website developers control over responsive tables. So we created a custom module, the Tablesaw Filter, enabled by default.
Within the configuration page, you can set whether tables generated by Drupal’s Views should be responsive, and whether to apply a CSS class that helps distribute content:
You can automatically make any tables added in any WYSIWYG fields responsive by enabling the text filter for the text format(s) you’re using (usually “Filtered HTML”).
With this functionality as a text format filter, your content creators don’t need to change anything about how they create tables: the appropriate behavior is applied when the page is rendered.
For more details on customizing responsive tables, see our documentation.