Wrapping a Table in a Div with Markup

support
1

Hi there, thanks everyone for reading in advance!

I’m attempting to wrap a div around all my tables that are generated.

In layouts/_default/_markup, I have the following in render-table.html:

<!-- Debug: render-table.html is being used -->
<div class="table-container">
  {{ .Inner | safeHTML }}
</div>

In my config.toml I have goldmark set to unsafe so that I can do some things with images.

[markup.goldmark.renderer]
  unsafe = true

But for some reason no matter what I try, this won’t generate the wrapping div. And I can tell it’s not processing because the debug isn’t showing after build either.

What should I do? Thanks!

2

layouts/_default/_markup/render-table.html isn’t a thing:
https://gohugo.io/render-hooks/introduction/

You could create a “div-table” shortcode, or if you just want to assign a class to the table use a markdown attribute.

3

Thank you! I got the table working with shortcode option. Would be nice if there were a way to do render hooks for tables that way we could just use the normal table and no wrapper. But this works for now :slight_smile:

4

See this link below (I use the same code to apply overflow to tables to make them scrollable on small devices. The request for a table render hook has been made several times over the years e.g. Markdown render hook - table · Issue #9316 · gohugoio/hugo · GitHub)

https://discourse.gohugo.io/t/responsive-tables-in-markdown/10639/5

5

@Arif @jmooring This worked amazing!!! I got it all working. Here was the solution:

{{ $contentTransform := .Content | replaceRE "(?s)(<table>.*?</table>)" "<div class=\"table-container\">$1</div>" 
}}
6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.