Numerowanie wierszy (rows) tabeli [CSS]

monitor kod php css programowanie

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



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ż

Style CSS dla Internet Explorer (IE 6, IE 7, IE 8) Częstym problemem podczas tworzenia strony internetowej jest wyświetlanie w różny sposób elementów witryny pod przeglądarkami (inaczej w Internet Expl...
Pudełkowy model strony CSS – box-sizing Model pudełkowy jest jednym z najpopularniejszych sposobów budowania stron. Jak sama nazwa mówi składa się on z pudełek czyli mamy np. jeden duży kont...
Właściwość CSS empty-cells Właściwość CSS empty-cells w dużym skrócie służy do ukrywanie niewypełnionych pól. Innymi słowy empty-cells informuje przeglądarkę o tym, że jeśli dan...
Obramowanie na stronie – CSS Obramowanie (tzw. ramka) stanowi istotny element strony internetowej nie tylko w przypadku tabel, może ono np. stanowić bardzo ciekawą dekoracją (np. ...