Numerowanie wierszy (rows) tabeli z pomocą CSS
(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.
Treść wpisu
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.
| # | First | Last | Handle |
|---|---|---|---|
| Mark | Otto | @mdo | |
| Jacob | Thornton | @fat | |
| Larry | the Bird |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <div class="container-fluid"> <div class="bd-example"> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <td scope="row"></td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td scope="row"></td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td scope="row"></td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> </div> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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:
1 | 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.0
Jak widać na załączonym przykładzie pierwszy do tej pory pusta kolumna została wypełniona.