First, thank you for your âcontentâ code.
I never used markdown for tables till yesterday/day before, so had ho idea how to draw tables in markdown.
Regarding card-mod.
Sometimes - very rarely - I see some instability for markdown.
What I noticed is (and told about it earlier) - using this
style:
ha-markdown:
$: |
is better than
style:
ha-markdown $: |
While playing with card-mod for tables in markdown, I created 3 similar cards (code will be posted later), all 3 cards seem to be have stable styles. So, cannot find a reason of instabilityâŚ
As I said many times, I am not an expert in CSS, only deal with it for card-mod.
Mainly my CSS knowledge comes from âtry-fail-try-successâ.
Regarding your code.
table {
border-spacing: 0;
width: 100%;
padding: 8px;
border-radius: var(--ha-card-border-radius);
}
This âborder-radiusâ seems to be not working:
â there is a âpaddingâ defined;
â âoverflowâ is default (w/o clipping),
so it does not change borders.
Later I will post a method to define borders.
Next, for this:
th:first-child {
border-top-left-radius: var(--ha-card-border-radius);
}
th:last-child {
border-top-right-radius: var(--ha-card-border-radius);
}
This way to define âborder-radiusâ is preferable if:
â you need to define âborder-radiusâ for the âtheadâ only;
â due to some reasons you cannot define âborder-radiusâ for âtableâ (in this case you will have to define âborder-radiusâ for the last row as well).
Next, for this:
tr:nth-child(even) {
background-color: var(--table-row-background-color);
}
The âtrâ element is inside âtheadâ too.
So, use âtbody tr:nth-child(even)â path.
BTW, your code for table may be a bit âoptimizedâ:
content: >-
Domain | Count
:---|---:
{% for domain in (states | groupby('domain'))[:5] -%}
{%- set name = domain[0].replace('_', ' ') | title -%}
**{{ name }}** | {{ states[domain[0]] | count }} {{"\n"}}
{%- endfor %}