Zvýraznění řádků a sloupců tabulky

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.

Text Text
Text Text
Text Text

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.

Text Text Text
Text Text Text
Text Text Text

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.

    Oříznutí zvýraznění

  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.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Šachovnicový výpis položek

Šachovnicový výpis položek

Jak vypsat položky sestávající ze dvou sloupců, aby se pořadí sloupců střídalo.

CSS mapa s popisky

Body s popisky na mapě

Statická obrázková mapa s vlastními body a :hover popisky.

Zvýraznění aktivní kotvy

Zvýraznění aktivované kotvy (:target)

Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Kreslení v CSS

„Kreslení“ pomocí CSS

Jak vytvářet jednoduché tvary místo obrázků prostým CSS?

Komentáře