CSS - Visuelle Orientierung in Tabelle

[Rolf B]

Hallo Stefan,

oben bzw. rechts visuell angezeigt bekommt in welcher Spalte und welcher Zeile man sich befindet.

Lechts und rinks ist schwierig, wervexele ich auch ständig.

Zumindest in meinem Excel sind die Zeilennummern links 😉

Zeilenweise ist das, was Du möchtest, mit der Pseudoklasse :hover machbar.

<table>
<thead>
</thead>
<tbody>
<tr><th></th><td></td><td></td><td></td><td></td></tr>
<tr><th></th><td></td><td></td><td></td><td></td></tr>
<tr><th></th><td></td><td></td><td></td><td></td></tr>
</tbody>
</table>

tbody tr:hover th {
   background-color: #ffc;
}

Damit würde die th Zelle in den body-Rows eine gelbe Hintergrundfarbe bekommen, wenn die Maus irgendwo in der Zeile schwebt.

Für Spalten geht das nicht. Es gibt zwar das col-Element, mit dem Du Spaltenbreiten definieren kannst, und dem Du auch eine Hintergrundfarbe zuweisen könntest. Aber weil die td-Elemente keine Kind-Elemente von col sind und die Relation zwischen col und td nur im Table-Anzeigemodell ist, wird der hover über einem td-Element nicht auf das col-Element übertragen.

Es gibt böse Tricks draußen im Web. Beispielsweise

td:hover::before {
   content: " ";
   position:absolute;
   height: 10000px
   width: 100%;
}

D.h. wenn man über einem td hovert, wird diesem td ein Pseudoelement verpasst, das riesig hoch ist und die ganze Spalte überdeckt. Mittels overflow:hidden auf der table wird dann verhindert, dass dieses Pseudoelement aus der Tabelle hinausschaut.

Aus meiner Sicht: NICHT tun. Ein solches Element belastet die Layout-Engine des Browsers massiv. Besser wären wohl col-Elemente und eine JavaScript-Lösung, die auf mouseenter und mouseleave reagiert und dem col-Element, das zum td-Element gehört, eine Highlight-Klasse zuweist. Die Nummer des col-Elements bekommst Du über die cellIndex-Eigenschaft des td Elements (vorausgesetzt, dass keine colspans verwendet werden).

Das ist natürlich nur für Menschen nutzbar, die eine Maus verwenden. Manche Touch-Geräte simulieren mouseenter und mouseleave bei Touch-Aktionen. Das Feature wird also nicht für jeden verfügbar sein.

Rolf