Responsive and scrollable tables in Hugo

[Arif]

Has there been any progress here? Any older discussion I see wrap the table in a div tag in either a shortcode, or using replaceRE.

[frjo]

You can use attributes to add classes to tables, headers etc. see Configure markup | Hugo.

I have build in a “responsive-table” class to my Zen theme, see hugo-theme-zen/assets/sass/components/tables/_tables.scss at main · frjo/hugo-theme-zen · GitHub and hugo-theme-zen/assets/js/tables.js at main · frjo/hugo-theme-zen · GitHub

Example here: Components – Zen demo site

[Arif]

@frjo

You can use attributes to add classes to tables

I am aware of this, but chose to avoid it because it is a lot of work. The replaceRE workaround is what I went with though. I was thinking if this is a Hugo, Goldmark or a markdown limitation issue.

Edit: The attributes add the class inside the table. But what I wanted is wrapper around it with a class. So, attributes won’t work.