Examples from forum
These examples are from the Home Assistant community post Styling the card by Ildar_Gabdullin. The images are stored locally in this documentation; the code is assigned to the respective example from the forum.
External examples
The examples are forum excerpts and may need to be adapted depending on the Home Assistant version, flex-table-card version or additionally used cards such as auto-entities and card_mod.
UIX versions
The third column contains a UIX variant of the code. Only the styling part is replaced: card_mod: becomes uix:, the native css: configuration of the flex-table-card remains unchanged.
1. Zero padding and colored table frame
Image
Code
UIX version
2. No internal frames
Image
Code
UIX version
3. Own internal frames: headers and cells
Image
Code
UIX version
4. Own internal frames: table cells only
Image
Code
UIX version
5. Own internal borders: top of line
Image
Code
UIX version
6. Own internal frames: column separators
Image
Code
UIX version
7. Restore padding via card_mod
Image
Code
UIX version
8. Horizontal scroll bar
Image
Code
UIX version
9. Horizontal and vertical scroll bar
Image
Code
UIX version
10. Header: different styles
Image
Code
UIX version
11. Hide headers
Image
Code
UIX version
12. Partially hide header
Image
Code
UIX version
13. Visually summarize headers
Image
Code
UIX version
14th lines: same background color
Image
Code
UIX version
15. Rows: alternating and single styles
Image
Code
UIX version
16. Rows: Hover styling
Image
Code
UIX version
17. Columns: different styles
Image
Code
UIX version
18. Adjust column width
Image
Code
UIX version
19. Cells: style single row and cell
Image
Code
UIX version
20. Dynamic styling via entity state, variant 1
Image
Code
UIX version
21. Dynamic styling via entity state, variant 2
Image
Code
UIX version
22. Conditional cell contents with modify, div and span
Image
Code
UIX version
23. Make text in table cells selectable
Image
Code
UIX version