Hugo partial code to add class to table

There is no straight direct way to add a css class to hugo tables for styling. We use a workaround to add class to hugo marked-down tables.

File: <theme_dir>/layouts/partial/content.html

{{- if .Content -}}
    {{- $old := "<table>" -}}
    {{- $new := "<table class=\"table table-sm\">" -}}
    {{- replace .Content $old $new | safeHTML -}}
{{- end -}}

This partial replaces all occurrence of < table > with < table class=“table table-sm” > in .Content.

Now in your temaplate code instead of using .Content use partial “content.html”

{{- partial "content.html" -}}

Result ➥

markdown content

| A | B |
|---|---|
| 1 | 2 |

Output