Styl tabulky HTML
Použijte CSS, aby vaše tabulky vypadaly lépe.
HTML tabulka - Zebra Stripes
Pokud přidáte barvu pozadí na každý druhý řádek tabulky, získáte pěkný efekt zebřích pruhů.
1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 |
Chcete-li upravit styl každého dalšího prvku řádku tabulky, použijte :nth-child(even)
selektor takto:
Příklad
tr:nth-child(even) {
background-color: #D6EEEE;
}
Poznámka: Pokud použijete (odd)
místo
(even)
, styl se objeví na řádku 1,3,5 atd. místo 2,4,6 atd.
HTML tabulka - vertikální pruhy zebry
Chcete-li vytvořit svislé pruhy zebry, upravte každý druhý sloupec namísto každého druhého řádku .
1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 |
Nastavte :nth-child(even)
datové prvky tabulky pro takto:
Příklad
td:nth-child(even),
th:nth-child(even) {
background-color: #D6EEEE;
}
Poznámka:
Pokud chcete mít styl na záhlaví i na běžné buňky tabulky, umístěte :nth-child()
selektor na prvky th
i prvky.td
Kombinujte vertikální a horizontální pruhy Zebra
Můžete kombinovat styl ze dvou výše uvedených příkladů a budete mít pruhy na každém druhém řádku a každém druhém sloupci.
Pokud použijete průhlednou barvu, získáte překrývající se efekt.
Použijte rgba()
barvu k určení průhlednosti barvy:
Příklad
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150,
212, 212, 0.4);
}
Horizontální přepážky
Jméno | Příjmení | Úspory |
---|---|---|
Petr | Griffin | 100 $ |
Lois | Griffin | 150 dolarů |
Joe | Swanson | 300 dolarů |
Pokud zadáte ohraničení pouze ve spodní části každého řádku tabulky, budete mít tabulku s vodorovnými oddělovači.
Přidejte border-bottom
vlastnost ke všem
tr
prvkům, abyste získali vodorovné oddělovače:
Příklad
tr {
border-bottom: 1px solid #ddd;
}
Posuvný stůl
Použijte :hover
selektor
tr
pro zvýraznění řádků tabulky najetím myši:
Jméno | Příjmení | Úspory |
---|---|---|
Petr | Griffin | 100 $ |
Lois | Griffin | 150 dolarů |
Joe | Swanson | 300 dolarů |
Příklad
tr:hover {background-color: #D6EEEE;}