Styling the card:
This post contains examples of styling the flex-table-card
.
Basically the own “css
” option is used; in some cases card-mod is used too.
The main description is provided here.
Whole table:
Zero padding, colored common border:
![image](https://community-assets.home-assistant.io/original/4X/5/5/5/555034367a69f96f1a04b9a2770a41a966cc8742.png)
code
- type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- &ref_column
name: brightness
data: brightness
- *ref_column
strict: true
css:
table+: >-
border: 1px solid cyan;
padding: 0px;
No internal borders:
![image](https://community-assets.home-assistant.io/original/4X/7/e/c/7ece648bf57e6dd08c7c7d2b5a0ddf7281dffcb5.png)
code
type: vertical-stack
cards:
- type: markdown
content: |
no borders
style: |
ha-card {
color: red;
}
- type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
align: center
- *ref_column
- *ref_column
strict: true
css:
table+: 'border-collapse: collapse;'
Custom internal borders:
![image](https://community-assets.home-assistant.io/original/4X/d/1/4/d14973d5fae21ebdea537258d44e167656d1cbce.png)
code
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
align: center
- *ref_column
- *ref_column
strict: true
css:
table+: 'border-collapse: collapse;'
th+: &ref_border_style 'border: 1px solid red;'
td+: *ref_border_style
![image](https://community-assets.home-assistant.io/original/4X/0/2/3/023cd9693fb4b79b30a93602d8d7117c11098447.png)
code
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
align: center
- *ref_column
- *ref_column
strict: true
css:
table+: 'border-collapse: collapse;'
td+: 'border: 1px solid red;'
![image](https://community-assets.home-assistant.io/original/4X/e/d/5/ed5ecb0939e52dae4d0ec48c92ea4208130d5556.png)
code
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
align: center
- *ref_column
- *ref_column
strict: true
css:
table+: 'border-collapse: collapse;'
tbody tr+: 'border-top: 1px solid red;'
![image](https://community-assets.home-assistant.io/original/4X/d/a/0/da069db4c7e2f6434d148c9640bf071c7d55d6a8.png)
code
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
align: center
- *ref_column
- *ref_column
strict: true
css:
table+: 'border-collapse: collapse;'
th:nth-of-type(n+2)+: &ref_border_style 'border-left: 1px solid red;'
td:nth-of-type(n+2)+: *ref_border_style
Note that adding “border-collapse: collapse
” removes a padding around the table.
If you need the padding - add it by card-mod:
card_mod:
style: |
div {
padding: 16px;
}
![image](https://community-assets.home-assistant.io/original/4X/8/4/4/84408ca1c455bc4c75426131486b1071fa4d21c4.png)
Horizontal scrollbar:
Better to use in combination with zero padding.
![image](https://community-assets.home-assistant.io/original/4X/2/f/8/2f850040b806729675cdf30b681c5a198809b65a.png)
code
- type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- &ref_column
name: brightness
data: brightness
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
strict: true
css:
table+: 'padding: 0px'
card_mod:
style: |
ha-card {
overflow: auto;
}
Horizontal & vertical scrollbars:
![image](https://community-assets.home-assistant.io/original/4X/8/0/a/80acb18413c3a782df4c13c4c9ee2621fa846c20.png)
code
- type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 13
card:
type: custom:flex-table-card
columns:
- &ref_column
name: brightness
data: brightness
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
strict: true
css:
table+: 'padding: 0px'
card_mod:
style: |
ha-card {
overflow: auto;
max-height: 200px;
}
Header:
Various styles:
a) background-color:
– all cells = magenta
– cells 2, 4, 5, 6 = custom colors
b) text-align:
– all cells = left
– cells 1, 6 = custom alignment
c) color for text:
– all cells = default
– cells 1, 5, 6 = custom color
d) color for border:
– all cells = default
– cells 1, 6 = same as for text
– cell 5 = custom color
e) border style:
– all cells = 1px solid
![image](https://community-assets.home-assistant.io/original/4X/9/7/f/97fb8976b3aa9ffe30655a8a270a8bd54d741122.png)
code
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 2
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
align: right
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
strict: true
css:
thead th: >-
background-color: magenta;
text-align: left !important;
font-weight: 300;
border: 1px solid;
thead th:first-child: >-
text-align: center !important;
color: cyan;
thead th:nth-child(2): >-
background-color: lightgreen;
thead th:nth-child(4): >-
background-color: rgba(0,0,255,0.2);
thead th:nth-child(5): >-
background-color: rgb(255,255,255);
color: red;
border-color: cyan;
thead th:last-child: >-
background-color: yellow;
color: orange;
text-align: right !important;
Hidden header:
![image](https://community-assets.home-assistant.io/original/4X/8/7/9/8790eb33443dc7771f66c9e1746ccd5c8c3f85a5.png)
code
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 2
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
strict: true
css:
thead th: 'display: none;'
Hidden header (partially):
![image](https://community-assets.home-assistant.io/original/4X/4/c/8/4c8948aeeb8cc67b1365c238bd190de0f4d273cb.png)
code
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 2
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
strict: true
css:
thead th: 'color: transparent;'
thead th:first-child: >-
color: unset;
background-color: lightgreen;
thead th:last-child: >-
color: unset;
background-color: yellow;
Merged-like header:
![image](https://community-assets.home-assistant.io/original/4X/1/c/1/1c17a96bca23ff7850dcbf5c70b1a1da5a6cb740.png)
code
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
align: right
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
strict: true
css:
table+: 'border-collapse: collapse;'
th+: >-
border-bottom: 1px solid rgb(127,127,127);
text-align: left !important;
th:nth-of-type(n+2)+: &ref_style_border >-
border-left: 1px solid rgb(127,127,127)
td:nth-of-type(n+2)+: *ref_style_border
th:nth-of-type(2)+: &ref_style_merged_header >-
border-left: none;
color: transparent;
th:nth-of-type(5)+: *ref_style_merged_header
card_mod:
style: |
div {
padding: 16px;
}
Rows:
Same background color for all rows:
![image](https://community-assets.home-assistant.io/original/4X/c/5/d/c5dbd2d971c3f325d9e8b40c9ef03da3b328ce4b.png)
code
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
align: right
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
strict: true
css:
tbody tr+: >-
background-color: rgba(0,255,0,0.4) !important;
Individual styles:
![image](https://community-assets.home-assistant.io/original/4X/3/9/a/39abb7a23bbcc2ccb66817bc2534937492b4d126.png)
code
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 7
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
align: right
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
strict: true
css:
tbody tr+: 'color: red'
tbody tr:nth-child(odd)+: 'background-color: rgba(0,255,0,0.4);'
tbody tr:nth-child(even)+: 'background-color: rgba(255,255,0,0.4);'
tbody tr:nth-child(4)+: >-
background-color: orange;
color: blue;
Styling on hovering:
![fle](https://community-assets.home-assistant.io/original/4X/0/f/3/0f385e56c8f5e426530f67373ceb8c4c96e503ab.gif)
code
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
strict: true
card_mod:
style: |
tbody tr:hover {
background-color: coral !important;
}
Columns:
Various styles:
![image](https://community-assets.home-assistant.io/original/4X/8/b/2/8b2a34e278acd5bcb609f2a723f545cedd660e03.png)
code
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 2
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
align: right
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
strict: true
css:
tbody tr td+: >-
background-color: yellow;
color: red;
tbody tr td:nth-child(odd)+: >-
background-color: pink;
tbody tr td:first-child+: >-
background-color: cyan;
color: white;
border: 1px solid black;
text-align: left;
tbody tr td:last-child+: >-
background-color: orange;
Changing a column’s width:
![image](https://community-assets.home-assistant.io/original/4X/f/8/1/f8191e0b9518cc82cb7e6cef23688e50897add75.png)
code
type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 2
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
- *ref_column
- *ref_column
strict: true
css:
tbody tr td:first-child+: 'width: 50%;'
tbody tr td:last-child+: 'width: 30%;'
Cells:
![image](https://community-assets.home-assistant.io/original/4X/4/1/4/41410b7e83f1247cf98977601f05356e7cab1cf4.png)
code
type: vertical-stack
cards:
- type: markdown
content: |
обращение к ячейке + align
style: |
ha-card {
color: red;
}
- type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- &ref_column
name: hhh
data: brightness
align: right
- *ref_column
- *ref_column
- *ref_column
- *ref_column
- *ref_column
strict: true
css:
tbody tr:nth-child(4)+: >-
background-color: orange;
color: blue;
tbody tr:nth-child(4) td+: >-
text-align: center;
tbody tr:nth-child(4) td:nth-child(3)+: >-
background-color: yellow;
color: red;
text-align: left;
How to style dynamically dependently on some conditions:
This way to style a card dynamically may only be used if a condition is set dependently on some entity - not on a value in a particular grid cell (for which the next way may be used).
Assume we need to style a cell (same for a row, a column, a header, a whole card) dependently on some “input_boolean”.
A possible way is using card-mod:
– define a variable by card-mod dynamically;
– use this variable in the native “css” option.
code
- type: entities
entities:
- entity: input_boolean.test_boolean
name: change color
- type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 4
card:
type: custom:flex-table-card
columns: *ref_brightness_right_6cols
strict: true
card_mod:
style: |
ha-card {
{% if is_state('input_boolean.test_boolean','on') %}
--my-background-color: yellow;
{% else %}
--my-background-color: cyan;
{% endif %}
}
css:
tbody tr:nth-child(4) td:nth-child(3)+: 'background-color: var(--my-background-color);'
![изображение](https://community-assets.home-assistant.io/original/4X/7/f/4/7f4084b62780bb2c45cf2d9d712d125e5b3f3a8c.png)
![изображение](https://community-assets.home-assistant.io/original/4X/b/5/2/b52d9f8933c0d3a6507bebfa37793c1247236118.png)
One more method proposed on GitHub by other people:
there is a way to style a particular cell conditionally by using a “modify
” option with specifying a “div” or a “span” element (also check this - Using “div”, “span” & “ha-icon” for a header):
![image](https://community-assets.home-assistant.io/original/4X/f/5/a/f5a330f7764471bb46af866cac91c69f28155365.png)
Code
- type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 5
card:
type: custom:flex-table-card
columns:
- name: brightness
data: brightness
- name: "div"
data: brightness
modify: |-
if (x == undefined)
"none"
else if (parseInt(x) >= 100 )
'<div style="color:cyan;">more</div>'
else
'<div style="color:red;">less</div>'
- name: "span"
data: brightness
modify: |-
if (x == undefined)
"none"
else if (parseInt(x) >= 100 )
'<span style="color:cyan;">more</span>'
else
'<span style="color:red;">less</span>'
strict: true
How to provide an ability to select text:
Solution provided by daringer here.
![image](https://community-assets.home-assistant.io/original/4X/a/d/3/ad3b787754bccfcf2ef59a908ef7ae3355bcca4c.png)
code
- type: custom:auto-entities
filter:
include:
- domain: light
sort:
count: 2
card:
type: custom:flex-table-card
columns:
- &ref_0
name: hhh
data: brightness
align: right
- *ref_0
- *ref_0
- *ref_0
- *ref_0
- *ref_0
strict: true
css:
tbody tr+: 'user-select: text'