Numerowanie wierszy (rows) tabeli lub div z pomocą CSS

Czas czytania: 2 minut

Dzisiaj zajmiemy się tematyką numerowania (liczenia, punktowania) elementów HTML takich jak tabela lub <div>.

Chodzi mi o efekt podobny do tego kiedy tworzymy numerowaną listę – numer zostanie nadany bez naszej ingerencji. Jednak tym razem numerować będziemy nie fragmenty tekstu a całe obiekty lub fragmenty. Dobrym przykładem tego będzie tabela:

Do czego może przydać się numerowanie?

Dobrym przykładem może tu być sytuacja jaka spotkała mnie jakiś czas temu. Zostałam w tedy poproszona o ponumerowanie wierszy tabeli – tak by docelowy użytkownik wiedział ile konkretnie elementów ona zawiera. Problem polegał na tym, że dane wprowadzone do tabeli pobierane były z bazy danych a ich ilość ulegała systematycznej zmianie. Ręczne numerowanie odpadało więc.

W teorii mogłam wprowadzić pewne zmiany w kodzie skryptu tworzącego tabelę dodając nową funkcję. W praktyce było to jednak raczej kiepskim pomysłem. Przede wszystkim dlatego, że kod nie był mój. W przypadku aktualizacji wtyczki modyfikacja została by usunięta.

Ostatecznie rozwiązaniem mojego problemu okazało się CSS.

Liczenie, automatyczne numerowanie wierszy tabeli

Liczenie wierszy (ang. rows) w tabeli w praktyce z pomocą CSS okazało się stosunkowo proste. Wymagało jednak drobnego wysiłku w postaci zapoznania się z funkcją – „counter”. Co ciekawe działa ona nie tylko na tabele. Policzyć można nią także np. elementy <div>.

W tym przypadku omawiamy jednak numerowanie wierszy tabeli. Więc oczywiście na samym początku będziemy potrzebowali tabeli posiadającej pewną ilość wierszy i kolumn.

Poniżej zamieściłam przykładową tabelkę formatowaną przez Bootstrap.

Jak widać zostawiłam w niej jedną kolumnę pustą – to właśnie w tym miejscu planuje umieścić numerację wierszy. Dokładny kod CSS tej tabeli nie jest wam potrzebny – do tego momentu nie gra on bowiem dużej roli.

Interesować będzie nas za to będzie ten kod:

table {
counter-reset: rowNumber -1;
}

table tr {
counter-increment: rowNumber;
}

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

Powyższy kod spowoduje pojawienie się w pierwszej kolumnie numeracji wierszy.

Jak widać na załączonym poniżej przykładzie numeracja zaczyna się od 2 wiersza. Pierwszy zawierający opis, etykiety jest pomijany.

Efekt ten uzyskałam dzięki właściwości:

counter-reset: rowNumber -1;

Analogicznie możecie pominąć również drugi lub trzeci.

Jak to wygląda w praktyce

See the Pen numbering the rows of the array – counter-increment by Aura (@Julka85) on CodePen.

Jak widać na załączonym przykładzie pierwszy do tej pory pusta kolumna została wypełniona.

See the Pen counter CSS by Aura (@Julka85) on CodePen.