Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[vore]

Hallo!

Wie kann ich einen JSON-Tabelle farblich anpassen?

Ich würde z.B. der Header gerne in eine anderen Farbe haben, als die Datenzeilen.

Eventuell auch eine andere Schriftfarbe.

Jemand ein Tip?

Gruß

Vore

[Homoran]

Pix hat sowas fürden TV Spielfilm Adapter irgendwo gepostet.

Führte bei mir aber dazu, dass es für alle json Widgets galt.

Gruß

Rainer

[Fitti]

Hi,

Du kannst eine eigene Klasse im View vergeben. Ich habe als Beispiel eine Klasse mit dem Namen meinvis eingegeben:

Dann gehst Du auf den CSS Reiter und fügst Deine Anpassungen durch:

Die Überschrift hat die Klasse .meinvis-th Die Spalten .meinvis-tr usw.

Dein verwendeter Name, gefolgt von einem Bindestrich, gefolgt von den üblichen HTML Tabellenbezecihnungen sind also die aufzurufende Klasse.

Ich hoffe Du hast ein bisschen CSS Kenntnisse?

Mit dieser Technik werden nur(!) diese Widgets angepasst, denen du diesen Klassennamen gabst.

Z.B.:

.meinvis-tr{
  background-color: rgba(187, 156, 175,0.6);   
  font-size: 11px;
}
.meinvis-th{
  background-color: rgba(87, 156, 175,0.6);   
  color: red;
}

ergibt:

Der Rest ist jetzt fummelei… :D

Hoffe es hilft dir!

Fitti

[vore]

Hallo Fitti!

Danke für die ausführlichen Tips! Damit kann ich auf jeden Fall etwas anfangen. Bin kein CSS Experte aber dazu sollte es reichen.

Gruß

vore

[Vumer]

gibt es eine Möglichkeit so das die Tabellenbeite in tr und th gleich ist?

[minorski]

Es besteht die Möglichkeit, nur die gewünschten Eigenschaften derTabellenklasse per CSS direkt zu überschreiben. Das erspart die mühsame Neuanpassung und erhält die ursprüngliche Formatierung. Diese Änderungen wirken sich dann aber auch auf alle anderen Tabellen im Projekt aus.

Beispiel:

.tclass-th {
    background-color:lightgrey !important;
    color:black !important;
}

.tclass-tr:nth-child(even) {
    background-color:lightblue !important;
}

.tclass-tr:nth-child(odd) {
    background-color:white !important;
}

Wichtig ist das CSS-Attribut !important um die bestehenden Definitionen zu überschreiben.

Die CSS-Klasse muss im Widget nicht angegeben werden.