Blokowanie nagłówków tabeli HTML w pionie poziomie za pomocą CSS


24 sierpnia 2021 / Michał Kortas


Słyszałem gdzieś kiedyś opinię, w której to blokowanie nagłówków tabeli z poziomu CSS działa tylko i wyłącznie w demach artykułów, w których się znajdują. Postaram się dzisiaj zagiąć czasoprzestrzeń tak, by końcowy efekt wyszedł z tej czarnej dziury przez horyzont zdarzeń i zadziałał również u Ciebie (oczywiście jeśli mówimy o najnowszych przeglądarkach).

Przygotowanie szkieletu tabeli

Tabela testowa będzie posiadała kilka kolumn i wiele wierszy, aby ukazać blokadę nagłówków w działaniu. Treścią się nie przejmujemy, dodając Lorem Ipsum.

Jeśli jesteś zainteresowany efektem końcowym, zerknij na poniższe GIFy lub odwiedź stronę: https://webroad.pl/demo/table-sticky-headers/

Nie chciałem rozciągać listingu w nieskończoność – powiel więc poniższą część <tbody> i zawarte w niej wiersze kilkadziesiąt razy, tak by pojawił się suwak pionowy.

Style tabeli, aby nie wyglądała zbyt surowo, niech będą następujące:

Efekt na ten moment:

Tabela z nagłówkami

Tabela z nagłówkami

Czas na część właściwą. Blokujemy nagłówki.

Blokowanie nagłówków przy przewijaniu strony w pionie

Najczęściej potrzebujemy właśnie tej blokady – górny wiersz nagłówka ma zostać przyklejony do górnej części ekranu. By uzyskać ten efekt w dokumencie HTML wystarczy dopisać do powyższej tabeli następujące kilka linijek kodu CSS:

Po odświeżeniu widoku i przewinięciu pionowym suwakiem nagłówek pozostanie na górze.

Zablokowany nagłówek poziomy tabeli

Zablokowany nagłówek poziomy tabeli

Blokowanie nagłówków przy przewijaniu strony w poziomie

Blokowanie pierwszej kolumny nie jest zbyt popularne, jednak często klient przyzwyczajony do blokad kolumn w Excelu może sobie zażyczyć i taką funkcjonalność.

Jeśli wcześniej nie zauważyłeś, spójrz ponownie na listing HTML tabeli, szczególnie na pierwszą kolumnę wiersza.

Zamiast <td> użyliśmy komórki <th> z atrybutem scope o wartości row. Mając tak przygotowaną kolumnę możemy teraz dodać odpowiednie style, aby ją zablokować.

Co otrzymaliśmy?

Zablokowany pionowy nagłówek tabeli

Zablokowany pionowy nagłówek tabeli

Super! Czy u Ciebie działa? :-)

Na co zwrócić uwagę przy blokowaniu nagłówków?

Kilka wskazówek do wdrażania blokady nagłówków zebrałem i wypisałem na poniższej liście:

  1. dodajemy z-index większy dla komórek w nagłówku poziomym, aby nagłówek pionowy chował się pod spód,
  2. jeśli blokujemy nagłówek przy przewijaniu pionowym określamy pozycję top lub bottom,
  3. jeśli blokujemy nagłówek przy przewijaniu poziomym określamy pozycję left lub right,
  4. dodajemy kolor tła do nagłówków, aby komórki przesuwane nie były widoczne przy przewijaniu po nimi,
  5. dodajemy cień, aby ukazać warstwy nadrzędne, jakimi są nagłówki.

Kod i demo

Kod z powyższego przykładu zamieściłem na GitHubie.

Demo możesz zobaczyć na specjalnie przygotowanej stronie.


Tagi:


Wskazówka – Rozciąganie elementów blokowych na 100% szerokości, wewnątrz elementów z marginesem wewnętrznym


20 września 2014 / Mr.Mr


ściskanie cytrynyCzasami proste problemy są najbardziej irytujące. Dlatego właśnie uruchomiliśmy nasz cykl szybkich wskazówek, które mogą pomóc Wam szybciej uporać się z męczącymi 'bugami’ i problemami. Dzisiaj zajmiemy się prostą, ale czasami złośliwą sprawą – rozciąganiem elementów blokowych na 100% szerokości wewnątrz elementów z marginesem wewnętrznym.

Continue reading Wskazówka – Rozciąganie elementów blokowych na 100% szerokości, wewnątrz elementów z marginesem wewnętrznym


Tagi:


„Przesuwane tabelki” – czyli sposób na responsywność tabel na stronie internetowej


16 lipca 2014 / Mr.Mr


Responsywne tabele na stronach internetowychZapewnienie użytkownikom urządzeń mobilnych wygodnego i szybkiego przeglądania stron internetowych to dzisiaj już standardowy wymóg. Responsive Web Design to jeden z fundamentów współczesnej sieci, a rosnąca ilość użytkowników tabletów i smartphone’ów zmusza nas do tego by nie zapominać o użytkownikach tychże urządzeń. O ile technologia poszła na tyle do przodu, że RWD stało się możliwe i w podstawach nawet relatywnie łatwe do implementacji to jednak pozostał jeden element HTML, który jakby nie zauważał tych zmian… tabelki. To najczęściej one powodują problemy na stronach mobilnych, ale i na to jest sposób!

Continue reading „Przesuwane tabelki” – czyli sposób na responsywność tabel na stronie internetowej


Tagi: