Jak pomocí CSS očíslovat položky v tabulce

Při vytváření tabulky v HTML se může občas hodit přidat automatické číslování řádků. Docílit toho lze jednoduše i bez použití JavaScriptu – jen v CSS.

Očíslování s vynecháním nadpisu

Nejdříve si ukážeme variantu, kdy je v tabulce použit nadpis (<th>), který do číslování samozřejmě zahrnovat nebudeme. CSS kód by v tomto případě vypadal takto:

table tr:not(:first-child) {
    counter-increment: rowNumber;
}

table tr:not(:first-child) td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

Očíslování bez nadpisu

Pokud v tabulce nadpis nepoužíváme, kód můžeme změnit na:

table {
    counter-reset: rowNumber;
}

table tr {
    counter-increment: rowNumber;
}

table tr td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

Publikováno 29.1.2015 v 15:04 | Kategorie: CSS