Numerowanie wierszy (rows) tabeli [CSS]

monitor kod php css programowanie

Kategoria wpisu Kurs CSS, Kursy Tagi: , , , , on przez .



Reading Time: 2 minutes

Jakiś czas temu stanęłam przed nowym wyzwaniem jakim okazało się policzenie ilości wierszy w tabeli . Problem przed jakim stanęłam polegał na tym, że dane wprowadzone do tabeli pobierane były z bazy danych a ich ilość ulegała systematycznej zmianie.

W teorii mogłam wprowadzić pewne zmiany w kodzie skryptu tworzącego tabelę dodając nową funkcję. Jednak kod nie był mój – i stanowił część funkcjonalności wtyczki. W efekcie mogło się to różnie skończyć.

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

Liczenie wierszy tabeli

Liczenie wierszy (ang. rows) w tabeli jest dosyć proste, ale wymaga pewnej wiedzy.

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.

#FirstLastHandle
MarkOtto@mdo
JacobThornton@fat
Larrythe Bird@twitter

Jak widać zostawiłam w niej jedną kolumnę pustą – to właśnie w tym miejscu umieszczone zostaną numery wiersza.

Tak prezentuje się kod HTML tabeli

Jak wspomniałam wcześniej tabela formatowana jest przez bootstrap dlatego pominę szczegóły formatowania a skupie się jedynie na samym numerowaniu.

Interesować będzie nas za to ten kod:

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:

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.0

Przeczytaj również

Selektor ogólnego rodzeństwa Zanim przejdę do zaprezentowania właściwości oraz możliwości pracy na selektorach, chciałam przybliżyć tematykę rodzeństwa. Rodzeństwem są ele...
Rodzaje kursora myszy Czasami w celu uatrakcyjnienia witryny internetowej chcemy zmienić kształty kursora myszy. Nie potrzebujemy do tego wszędzie obecnego JS wystarczy nam...
Zmienienie pierwszego elementu. Selektory CSS :fir... Selektory (pseudoklasa) :first-child i :first-of-type stanowią ciekawe rozwiązanie jakie oferuje nam CSS3 (stylach kaskadowych). Wykorzystuje się je d...
Równej wysokości kolumny Dość częstym problemem przy budowaniu strony internetowej jest utworzenie kolumn o równej wysokości. Wyrównanie dwóch kolumn z pewnością nikomu nie sp...