Feature request: Responsive tables

[scottanthonymurray]

For smaller screens, it would be nice to have a way to present tabular data in a vertical format in appropriate contexts. The ESI team currently uses this:

http://www.indiana.edu/~espd/rvb/develop/php/lib-extra-responsivetable.php

[nbannist]

I'm developing something similar for the new Knowledge Base frontend. It uses more markup (data-* attributes) but no JS currently. I'll make a codepen of my current code later today.

My version: https://codepen.io/nbannist/full/GzdmEM

Edit: Added url to codepen

[johnathaneg]

I really like this option's use of "cards" as a visual separation between the list items on the mobile view. I found it easier to read and understand the content.

http://www.indiana.edu/~espd/rvb/develop/php/lib-extra-responsivetable.php

[nbannist]

Note: If you're restyling a table, you have to be very careful about messing up accessibility. Some styling of tables affects element roles and can break content for screen readers.

[zttodd]

We plan to delve more into accessibility research to find a solution to this issue. This is a good candidate for a future release.