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.
And here’s the CSS that styles it.
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.
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-widthparameter 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 forfigure.wp-block-tableis primarily to override the theme’s setting that didn’t take into account the use of thefiguretag 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_code bw_plug]
- [bw_code bw_csv]
- [bw_code bw_table]