How to add CSS "class" attribute to markdown table

support
1

Just reviving this thread as the mmark solution doesn’t work anymore. As per current documentation markup has only two possible values “rst” for reStructuredText or “md” (default)

I’m facing the same problem: I’d like to add a css style to a table defined in a markdown file within the content section.

I’ve tried the following shortcode:

table.md:

{{< table class="my-table-class" >}}
| Header 1 | Header 2 |
| -------- | -------- |
| Cell 1   | Cell 2   |
{{< /table >}}

/layouts/shortcodes/table.html:

<table class="{{ .Get `class` }}">
    {{ .Inner }}
</table>

But the html rendered is as follows:

<!-- raw HTML omitted -->
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>
<!-- raw HTML omitted -->

Is there a way in hugo to assign css styles to tables (or other html elements) in the markdown files?

3

Block attributes are the solution. But this thread is completely outdated.

1 Like
4

https://discourse.gohugo.io/t/markdown-attributes/41783

5

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