Bw_table - find the best way to support horizontal scrolling on narrow devices

[bobbingwide]

On narrow devices tables often get very cramped. GitHub seems to have a solution that enables the table to be scrolled horizontally. What’s the CSS? Can I use this for bw_table?

An	example	where	tabular	content	gets	horizontally	scrolled?
Ok	then	what	do	i	have to do to make the content scroll	horizontally on my iPad?	Answer: this should scroll in portrait. Does it also scroll in landscape?

[bobbingwide]

Yesterday we had a look at a couple of solutions.

There is an extension to the tablepress plugin that provides four different solutions
https://tablepress.org/extensions/responsive-tables/

this uses some Javascript to set the width of the table so that it's wider than the div in which it's embedded.
Then a little bit of CSS is used to allow the table to be scrolled horizontally.

Without any JS we were able to do something similar and trick the table into being a certain width which on small devices was wider than the device. Then the columns didn't reduce to almost nothing and become unreadable.

Perhaps I could add a col width parameter to set the minimum width for each column and some @media query CSS that applies this logic for small devices.

I'd also want to be able to do this for tables created using the block editor!

[bobbingwide]

I also found this blog post which explained the problem quite nicely. https://www.robjwells.com/2018/05/horizontally-scroll-a-table-in-html/

[bobbingwide]

I wrote up my findings in https://herbmiller.me/horizontally-scrolling-tables-on-narrow-devices/

I'd also want to be able to do this for tables created using the block editor!

My blog post covers that.

Perhaps I could add a col width parameter to set the minimum width for each column and some @media query CSS that applies this logic for small devices.

I think I can make it much simpler just by setting a min-width value on the table. No need for media queries.