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.

Dodaj komentarz

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