Horizontally scrolling tables on narrow devices

I’ve been looking at how to enable horizontal scrolling on tables created by the [bw_table] shortcode, when the device width is narrow. I want to be able to do it using CSS, without JavaScript. I also want to be able to style the table in the native Gutenberg blocks.

Having looked at a couple of solutions, I believe I’ll be able to achieve it having the table nested in a Group block, and providing the CSS styling using my CSS block.

With a shortcode generated table

Here goes then. I’m using the bw_plug shortcode to create the table. It’s nested within this group block with the light green background.

Plugin name and description	Plugin links	Version, total downloads, last update, tested
oik-css Allows internal CSS styling to be included in the content of the page.	oik-css home	1.1.0 2,113 September 4, 2020 5.5.3

And here’s the CSS that styles it.

Set the minimum width of the table to the width of the group block when it’s full size and overflow-x on the parent group to auto.

table.bw_plug { min-width: 772px;  }

.wp-block-group { overflow-x: auto; overflow-y: hidden; }

With the Table block

The Table block doesn’t need to be wrapped in a Group as we can define the styling against the containing figure tag.

Start time	1	2	3	4
10:30	Jason Mihell 9	Dave Payne 21	Jason Bowles 10	Mike Griffin 27
10:40	Bob Unwin 22	Dave Madgwick 5	Matt Davies 11	Martin Hawker 22

And here’s the CSS for this table.

Set the minimum width of the table to 500px – we can let this one get narrower – and apply the overflow-x logic to the containing figure.

figure.wp-block-table { 

overflow-x: auto; 

overflow-y: hidden; 

margin: 1em 0px;

}

.wp-block-table table { min-width: 500px; }

Conclusion

For the Table block I can just use CSS, as and when required.
For the bw_plug, bw_csv and bw_table shortcodes I could add an optional min-width parameter that will produce the necessary HTML and CSS. So I won’t need to nest the shortcode in a Group block.
I could invest more effort in the theme’s stylesheet. The margin: setting for figure.wp-block-table is primarily to override the theme’s setting that didn’t take into account the use of the figure tag in Gutenberg blocks.
For this inline CSS to work I found that I also needed to change the Autoptimize settings, unchecking Also aggregate inline CSS?

Horizontally scrolling tables on narrow devices

With a shortcode generated table

With the Table block

Conclusion

References

Tide times from tidetimes.co.uk

Tide times from tidetimes.org.uk

Follow me