• Horizontally scrolling tables on narrow devices

    I’ve been looking at how to enable horizontal scrolling on tables created by the [bw_code 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
    Allows internal CSS styling to be included in the content of the page.
    March 14, 2024

    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; }


    • 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?



    Last updated:

    June 29, 2020

Today’s word is this:







Tide times from tidetimes.org.uk

Tide Times & Heights for Langstone Harbour on
14th April 2024
03:54 High Tide ( 4.45m )
09:07 Low Tide ( 1.41m )
16:32 High Tide ( 4.33m )
21:33 Low Tide ( 1.73m )

Tide times from tidetimes.org.uk

Tide Times & Heights for Northney on
14th April 2024
04:13 High Tide ( 4.3m )
09:12 Low Tide ( 0.9m )
16:49 High Tide ( 4.13m )
21:36 Low Tide ( 1.31m )