style solution for collapsing tables to cards

[derekeder]

We have a lot of sites that make use of showing data in a table format. However, on mobile, the horizontal space is limited and bootstrap's default solution with table-responsive (https://getbootstrap.com/docs/5.3/content/tables/#responsive-tables) only allows for horizontal scrolling.

In Datasette, they have a nice solution to this with css that make the table rows display as cards:

https://puddle.bunkum.us/chicago_council-fb92b83/voteevent

desktop:

mobile:

The HTML markup doesn't change, but at a breakpoint the table css does: https://github.com/simonw/datasette/blob/main/datasette/templates/row.html#L8-L11

@smcalilly do you do something like this for CCFP? I'd like to document a tool or some CSS that we can repurpose for our sites when we need it.

[smcalilly]

@derekeder +1, this would be very useful. I just looked at CCFP and we're using the bootstrap horizontal scroll.

[derekeder]

I implemented a version of this for Councilmatic. We could use this in other places with about 40 lines of css and a new span added to each table row. Its on Bootstrap 3, but could easily be adapted to Bootstrap 4 or 5. The biggest difference is the difference in breakpoints and utility classes in the different versions.

Table of data on desktop:

Same table rendered as cards on mobile:

[smcalilly]

@derekeder wants to try this in another project with Bootstrap 5.

[derekeder]

when its ready, i'll document in the Bootstrap section of the how-to docs