• 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
    Internal CSS styling
    2.0.0

    September 11, 2021
    5.8

    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?

    References



    Published:

    Last updated:

    June 29, 2020

Categories

Tide times from tidetimes.co.uk

Tide Times & Heights for Northney on
Friday, 15 October 2021

Tide times from tidetimes.org.uk

Tide Times & Heights for Northney on
15th October 2021
00:53 Low Tide ( 1.54m )
08:03 High Tide ( 3.76m )
13:29 Low Tide ( 1.67m )
20:34 High Tide ( 3.66m )