Zvýraznění sloupců/řádků tabulky po najetí

U rozsáhlejších tabulek může být obtížnější udržet přehled o tom, co k čemu patří. Pomůže zvýraznění sloupců a řádků po najetí myší.

Zvýraznění řádků

Zvýraznit po najetí celý řádek (<tr>) jde velmi jednoduše s využitím pseudo-třídy :hover.

tr:hover {
  background: yellow;
}

Mají-li buňky (<td>) nastavenou nějakou barvu, je nutné barvit až přímo tr:hover td, jinak by :hover celého řádku nebyl vidět.

Zvýraznění sloupců

Hover efekt pro sloupce je o poznání těžší. Existuje sice značka <col>, díky které jde efektivně stylovat celé sloupce, ale neumí odchytnout :hover.

Nabízí se tedy dvě řešení:

1. JavaScriptem zjistit pořadí sloupce, kde je kursor myši, a nastavit příslušnému <col> zvýrazňující třídu.
2. Zvýraznění zajistit absolutně posicovanými pseudo-elementy :before/:after.

Zvýraznění sloupce JavaScriptem

1. Při pohybu myši v tabulce (onmousemove) se z objektu event zjistí jeho target (cílový element).

2. Pokud cílový element bude buňka (<td>), zjistí se její pořadí z vlastnosti cellIndex.

3. Podle indexu se najde příslušný <col> a přidá se mu třída pro zvýraznění.

4. Je nezbytné, aby buňky tabulky neměly nastavené pozadí, jinak pozadí nastavené pro <col> nebude vidět.

5. Docílit zrušení zvýraznění při odjetí myší jde při události onmouseout nebo obalením <div>em s mírným paddingem, který označení „vyčistí“, protože není buňka tabulky.

Samostatná ukázka

Označení sloupce v CSS

1. Buňkám se přidá relativní posice.

2. Při :hoveru se zobrazí absolutně posicovaný pseudo-element :before. Ten bude mít pozadí v barvě zvýraznění, 100% šířku a hodně vysokou výšku, aby bezpečně přesáhla výšku tabulky.

   

3. Protože by tento absolutně posicovaný zvýrazňovač vylézal z tabulky, přidá se:

   table {
     overflow: hidden;
   }

4. Pro umístění zvýrazňovače „za text“ se přidá záporný z-index.

Živá ukázka

Těžko soudit, které řešení je lepší. Čistě CSS způsob je možná trochu snazší na implementaci (stačí pouze přidat CSS), spoléhání se na velkou výšku ale není úplně stoprocentní.

Generování CSS

Další možnost je vytvoření stylů pro zvýraznění každého sloupce (pomocí selektoru :nth-child) a při najetí měnit jen třídu tabulky podle aktivního sloupečku.

.sloupec-1 td:nth-child(1),
.sloupec-2 td:nth-child(2),
.sloupec-3 td:nth-child(3) {
  background: yellow;
}

Vygenerovat podobné CSS je ideální nějakým CSS preprocesorem, co umí cykly.

Živá ukázka

Hrubá síla

Funkční by zřejmě bylo i procházení všech buněk tabulky a měnění tříd, ale obával bych se problémů s výkonem u větších tabulek.