Beispiele aus Forum
Diese Beispiele stammen aus dem Home-Assistant-Community-Beitrag Styling the card von Ildar_Gabdullin. Die Bilder sind lokal in dieser Dokumentation gespeichert; der Code ist dem jeweiligen Beispiel aus dem Forum zugeordnet.
Externe Beispiele
Die Beispiele sind Forumsausschnitte und können je nach Home-Assistant-Version, flex-table-card-Version oder zusätzlich genutzten Karten wie auto-entities und card_mod angepasst werden müssen.
UIX-Versionen
In der dritten Spalte steht jeweils eine UIX-Variante des Codes. Dabei wird nur der Styling-Teil ersetzt: card_mod: wird zu uix:, die native css:-Konfiguration der flex-table-card bleibt unverändert.
1. Zero padding und farbiger Tabellenrahmen
Bild
Code
UIX-Version
2. Keine internen Rahmen
Bild
Code
UIX-Version
3. Eigene interne Rahmen: Header und Zellen
Bild
Code
UIX-Version
4. Eigene interne Rahmen: nur Tabellenzellen
Bild
Code
UIX-Version
5. Eigene interne Rahmen: Zeilenoberkante
Bild
Code
UIX-Version
6. Eigene interne Rahmen: Spaltentrenner
Bild
Code
UIX-Version
7. Padding per card_mod wiederherstellen
Bild
Code
UIX-Version
8. Horizontaler Scrollbalken
Bild
Code
UIX-Version
9. Horizontaler und vertikaler Scrollbalken
Bild
Code
UIX-Version
10. Header: verschiedene Styles
Bild
Code
UIX-Version
11. Header ausblenden
Bild
Code
UIX-Version
12. Header teilweise ausblenden
Bild
Code
UIX-Version
13. Header optisch zusammenfassen
Bild
Code
UIX-Version
14. Zeilen: gleiche Hintergrundfarbe
Bild
Code
UIX-Version
15. Zeilen: abwechselnde und einzelne Styles
Bild
Code
UIX-Version
16. Zeilen: Hover-Styling
Bild
Code
UIX-Version
17. Spalten: verschiedene Styles
Bild
Code
UIX-Version
18. Spaltenbreite anpassen
Bild
Code
UIX-Version
19. Zellen: einzelne Zeile und Zelle stylen
Bild
Code
UIX-Version
20. Dynamisches Styling per Entity-Zustand, Variante 1
Bild
Code
UIX-Version
21. Dynamisches Styling per Entity-Zustand, Variante 2
Bild
Code
UIX-Version
22. Bedingte Zellinhalte mit modify, div und span
Bild
Code
UIX-Version
23. Text in Tabellenzellen auswählbar machen
Bild
Code
UIX-Version