Right way to add background color for table header

I am using the default theme and would like to use the CSS snippets to add a background color for table header rows. Is this the right way to do that?

.markdown-rendered thead tr > th,
.markdown-rendered thead tr > th:nth-child(2n+2) {
  background-color: lime;
}

… or is there another way? Possibly better?

Thanks :pray:

1 Like

If it works for you, then I’d say “don’t try to fix something that isn’t broken”

Your rule should apply to both source and preview view. You’ll face these questions only if you plan to create a big theme, otherwise there’s no need to bother yourself :slightly_smiling_face:

1 Like

It does not exactly work right … not in all situations. They work for some but not all, which is why I was wondering if there is a better way to do it.

There is quite a bit of CSS classes involved with a table (as I see in the dev tools). If I understand correctly, there are different classes for rows, columns and such. I am not an expert to choose an uber way that just works.

Thanks

You could try with:

table tr th {
background-color: red;
}

Eventually use !important after red but before ;
This way you’ll force red, but I’d rather discourage to use important to lightly. If several important conflict each other nothing gets rendered.

Or you build a unique table, but then you’ve to add table-a to your cssclass yaml header.

.table-a thead tr {
background: burlywood;
}

When you say build a unique table, do you mean build it in html? <table class="table-a">...</table>?

No, usually i don’t use html tags, because cumbersome to read and insert, imo.
At first, I used html tags too (quickadd to the rescue) but later, I switched over to css and didn’t look back.

I used the definition unique because with cssclass you’re able to add standalone tables, at last in my experience.

If you’re interested in rich table layout, get a copy of my theme Dune from Obsidians theme repo. It covers colored tables and much more :wink:

You can read more about tables in my documentation

1 Like

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