Right way to add background color for table header

Help
1

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
2

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
3

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

4

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;
}
5

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

6

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