Tabellenspalten und -Reihen mit Pseudo-Elementen in CSS hervorheben
Kommentare

Content lässt sich auf verschiedene Arten ansprechend gestalten. Tabellen bieten dabei einige Möglichkeiten, Informationen auf einer Website aufzubereiten – insbesondere, weil einzelne Reihen und Spalten sich in CSS leicht farblich hervorheben lassen.

Allerdings ist das Hervorheben von Spalten oft ein wenig knifflig, zumindest, wenn man auf JavaScript weitestgehend verzichten möchte. Chris Coyier erklärt, wie man das Problem mit einem einfachen Trick umgehen kann.

Pseudo-Elemente vereinfachen Hervorhebung von Tabellen-Spalten

Tabellenspalten möglichst ohne den Einsatz von JavaScript hervorzuheben, gestaltet sich vor allem deshalb schwierig, weil es kein einzelnes HTML-Element gibt, das als Parent zu den Zellen in einer Spalte fungiert.

Ein simpler Trick kann dabei Abhilfe schaffen: der Einsatz von großen Pseudo-Elementen in den td-Elementen. Dabei erhält das Element einen negativen top-Wert, der der Hälfte der Höhe des Pseudo-Elements entspricht. Gleichzeitig wird der z-index mit einem negativen Wert angegeben, damit er unterhalb des Contents verbleibt.

Damit der Einsatz des Pseudo-Elements auch auf Touch-Devices funktioniert, müssen die Elemente zudem fokussierbar sein, was sich beispielsweise mithilfe von den Zellen hinzugefügten Click-Event-Handlern bewerkstelligen lässt. Darüber hinaus gibt es aber auch mit CSS die Möglichkeit, die Zellen fokussierbar zu machen und :focus-Styles hinzuzufügen.

Es zeigt sich also, dass Tabellenspalten und -Reihen mit CSS hervorzuheben nicht schwierig sein muss – wenngleich es sich hierbei sicher nicht um die Lösung handelt, die man als erstes erwarten würde. Einige Code-Beispiele und Demos zur Veranschaulichung des Einsatzes von Pseudo-Elementen dafür finden sich in Chris Coyiers Artikel zum Thema.

Aufmacherbild: colorful highlighters or markers isolated over a white background von Shutterstock / Urheberrecht: Dario Lo Presti

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -