herb miller

WordPress plugin specialist

  • Home
  • About
    • Online CV
    • Contact
    • Find me
  • Shop
    • Seriously Bonkers – softback book
    • Seriously Bonkers – signed book
    • Seriously Bonkers – PDF
  • Dev env
    • Local development
    • WordPress plugins
    • Server environments
    • Development hardware
    • WAMP configuration
    • Tools and languages
    • What’s not in my development environment?
    • Anything else in your development toolkit?
  • Sites
Horizontally scrolling tables on narrow devices

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 descriptionPlugin linksVersion, 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,035
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 time1234
10:30Jason Mihell 9Dave Payne 21Jason Bowles 10Mike Griffin 27
10:40Bob Unwin 22Dave Madgwick 5Matt Davies 11Martin 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

  • bobbingwide/oik#143
  • oik-css
  • [bw_plug]
  • [bw_csv]
  • [bw_table]

Categories: Gutenberg, shortcodes, WordPress

Published: June 29, 2020 | Last updated: June 29, 2020

Products

  • Seriously Bonkers - signed book £8.99 £5.99
  • Seriously Bonkers - PDF £1.00
  • Seriously Bonkers - softback book £8.99 £4.99

Recent Posts

  • Localization of Full Site Editing themes
  • Fizzie – an experimental Full Site Editing theme
  • How to survive WordPress 5.5’s removal of jQuery-migrate
  • SB Children block – my first Single Block plugin
  • Horizontally scrolling tables on narrow devices

Recent Comments

  • Aprende gutenberg #49 - Aprende gutenberg on SB Children block – my first Single Block plugin
  • Richard Cagle on Installing Imagick for PHP 7 on Windows 10
  • WordCamp Birmingham on bucket list – WordCamp Birmingham UK 2015 (#wcbrum)
  • mick on WordPress capabilities: How to restrict Add New while allowing Edit
  • mick on WooCommerce 2.2.4 – Dynamic API Reference

Archives

Categories

WordPress 5.6. PHP: 7.3.26

WordPress version: 5.6

Gutenberg version: 9.7.0

Tide times from tidetimes.co.uk

Tide Times & Heights for Northney on Wednesday, 27 January 2021
Low Tide: 03:43 ( 1.40m )
High Tide: 10:43 ( 4.40m )
Low Tide: 16:05 ( 1.00m )
High Tide: 23:16 ( 4.30m )

Tide times from tidetimes.org.uk

Tide Times & Heights for Northney on 27th January 2021
03:43 - Low Tide ( 1.36m )
10:43 - High Tide ( 4.35m )
16:05 - Low Tide ( 1.01m )
23:16 - High Tide ( 4.34m )

Follow me

  • Home
  • About
  • Blog
  • Contact
  • Find me
  • Privacy notice
  • Sitemap

Site:  herbmiller.me
© Copyright herb miller 2012-2021. All rights reserved.


Website designed and developed by Herb Miller of Bobbing Wide
Proudly powered by WordPress