Numerowanie wierszy (rows) tabeli z pomocą CSS

monitor kod php css programowanie

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


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Reading Time: 2 minutes

Jakiś czas temu stanęłam przed nowym wyzwaniem jakim okazało się policzenie  ilości (ponumerowanie) 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ę. 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 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

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

Przeczytaj również

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *