Qlik Sense Theme - Zebra Striped Tables & Pivots
Seit Qlik Sense Februar 2018 gibt es die Möglichkeit eigene Themes für Qlik Sense zu bauen. Diese Woche habe ich eine interessante Frage bekommen: kann man die Zeilen in Tabellen und Pivottabellen alternierend einfärben um die Lesbarkeit zu erhöhen? JA, kann man!
Aus QlikView kennen wir das Feature einfach als Einstellung beim Objekt. In Qlik Sense gibt es dieses Property nicht, dafür hat man natürlich den Vorteil, dass man den Qlik Sense Webclient über CSS steuern kann.
Wie man Zebra Stripes mit CSS definiere kann findet man unter w3schools.com. Als Ausgangspunkt für ein Qlik Sense Theme habe ich das QDT-Theme vom Qlik Demo Team hergenommen. Dort sieht man in der theme.css bereits einige Styles definiert. Zusätzlich habe ich folgendes eingefügt.
Das .zip File mit dem modifizierten Theme steht hier zum Download.
Um das Theme am Qlik Sense Server zu deployen, das .zip File in der QMC als Extension importieren.
Dann kann das Theme "qdt theme" über die Qlik Sense App Settings eingestellt werden.
Voilà - alle Tabellen werden jetzt schön gestreift dargestellt! Sogar wenn man das Balkendiagramm rechtsklickt und sagt "Daten anzeigen", wird die Tabelle gestreift. Das hat sogar mich positiv überrascht :-)
Folgende .css ergänzt auch ein Hovering, damit man die markierte Zeile besser sehen kann
Will man das Feature in allen Themes, ohne die Themes anzupassen, kann man die Styles am Ende der client.css ergänzen. Bitte bei jedem Update mitziehen.
In Qlik Sense Nov 2019 haben sich die .css Datei und Klassen geändert
![]() |
Die Tabellen mit alternierend weißen und grauen Zeilen in Default Qlik Sense Objekten |
![]() |
QlikView Stripes vs. Qlik Sense Table |
Wie man Zebra Stripes mit CSS definiere kann findet man unter w3schools.com. Als Ausgangspunkt für ein Qlik Sense Theme habe ich das QDT-Theme vom Qlik Demo Team hergenommen. Dort sieht man in der theme.css bereits einige Styles definiert. Zusätzlich habe ich folgendes eingefügt.
![]() |
.css Anweisung für Zebra Stripes |
Um das Theme am Qlik Sense Server zu deployen, das .zip File in der QMC als Extension importieren.
Dann kann das Theme "qdt theme" über die Qlik Sense App Settings eingestellt werden.
Voilà - alle Tabellen werden jetzt schön gestreift dargestellt! Sogar wenn man das Balkendiagramm rechtsklickt und sagt "Daten anzeigen", wird die Tabelle gestreift. Das hat sogar mich positiv überrascht :-)
Folgende .css ergänzt auch ein Hovering, damit man die markierte Zeile besser sehen kann
.qv-object-content-container .qv-object-content table tr:hover { background-color: #ffff99; }
Will man das Feature in allen Themes, ohne die Themes anzupassen, kann man die Styles am Ende der client.css ergänzen. Bitte bei jedem Update mitziehen.
In Qlik Sense Nov 2019 haben sich die .css Datei und Klassen geändert
C:\Program Files\Qlik\Sense\Client\views\common .qv-object-content-container .qv-object-content table tr:nth-of-type(2n) { background: #f1f1f1; } .qv-object-content-container .qv-object-content table tr:hover { background-color: #ffff99; }
Originale Defaultthemes liegen unter:
C:\Program Files\Qlik\Sense\Client\assets\external\sense-themes-default
Von dort kann man die Themes copy&paste nehmen, eine .qext ergänzen, das .css modifizieren und als Extension hinzufügen!
Und in Qlik Sense June 2020 ist es nun ein reguläres Feature geworden. Diese CSS Änderung sollte also nicht mehr notwendig sein!
https://showcase3.qlik.com/sense/app/bcca6893-a1b3-4763-8c5d-55ca7679878b/sheet/6db7d5d3-778e-4bb3-8282-18067067da46/state/analysis
Nur das highlighten ist ein Standarfeature geworden. Zebra ist weiterhin noch sehr nützlich! Danke Euch!
Stimmt eigentlich, Zebra Stripes gibt es noch immer nicht in den Default Themes.