Add a class for every table for easier styling

Is there a way to automatically assign a class to every table for easier styling? (Markdown)

I haven’t found any reliable and easy way to style all tables within the body of all posts. For example, if a post always falls in a div element with post-content class, styling tables as the follows risks breaking code blocks as their line numbers are tables:

.post-content table {
  // styles
}

I kinda expect a render hook that works with tables but there doesn’t seem to be one.

I understand I can use the :not pseudo-class but I’d prefer a more reliable way, because new table classes may be added by themes, code blocks, etc.

You can either configure the syntax highlighter to use inline line numbers instead of tables, or use something like this in CSS to exclude the table created by the syntax highlighter:

table:not(.highlight *) {
  border: 1px solid red;
}
1 Like

There isn’t one.

You could manually add a class to each table with markdown attributes, but I don’t think that’s what you’re looking for.

I needed this to disable Tailwind’s typography plugin styles for tables. So. I went with replaceRE in Hugo. (Replace no-prose with your class)

{{- $table := printf "<table class=not-prose>"}}
{{-  .Content 
  | replaceRE "<table>" $table
  | safeHTML 
}}

I am unsure if there is a more elegant way.

That should be possible to do in the Tailwind configuration.

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