Hugo

Moving tag table inside another tag to control overflow

Why? Because blackfriday render tables with the content, and because of that its not possible to control the overflow, more precisely overflow-x in a responsive layout. To avoid that, and avoid shortcodes, I prefer some post processing:

{{ block "main" . }}
    {{ $reIn1 := "<table>" }}
    {{ $reOut1 := "<figure><table>" }}
    {{ $reIn2 := "</table>" }}
    {{ $reOut2 := "</table></figure>" }}

    {{ $finalContent := .Content | replaceRE $reIn1 $reOut1 | replaceRE $reIn2 $reOut2 | safeHTML }}
    {{ $finalContent }}
{{ end }}

I followed a logic from another answer that I don’t remember from where but was not for tables. In this way, tag table is moved inside tag figure and we are able to control the overflow-x by css on the tag figure. Probably it kills speed, but I was able to achieve what I want. Responsible table are a pain in the 0x41 0x53 0x53 to make it right.