Responsywna tabela
Tabele znamy zapewne wszyscy. Dostosowują się do ilości tekstu, mają wsparcie wszystkich przeglądarek dostępnych na rynku, więc nie powinno być z nimi najmniejszego problemu. Niestety taki problem pojawia się wraz z Responsive Web Designem. Wyobraź sobie tabelę, która posiada bardzo dużą ilość danych, najlepiej rozłożoną w wielu kolumnach. Po zmniejszeniu ekranu każda z kolumn miałaby mikroskopijną szerokość, dzięki czemu stała by się bardzo długa i nieczytelna.
Jak można poradzić sobie z w/w problemem? Są na to dwa sposoby. Oba rozwiązania są wspierane przez (prawie) wszystkie przeglądarki dostępne na rynku. Rozwiązania różnią się efektem od siebie i tylko do Ciebie należy wybór konkretnego rozwiązania.
Przewijanie w poziomie
Pierwsze rozwiązanie jest znacznie prostsze, ale też mniej praktyczne. Nie oznacza to jednak, że nie jest ono praktykowane. Jest i to nawet we frameworku takim jakBootstrap. Polega ono na prostej czynności. Każdą tabelę którą chcemy wyświetlić na urządzeniach mobilnych dodajemy wewnątrz elementu np..table-responsive. Kod więc wygląda tak:
| 12345 | <divclass=”table-responsive”><table> ...</table></div> |
|---|---|
Następnie dodajemy style:
| 1 2 3 4 5 6 7 8 910111213141516171819202122 | html,body{width:100%;height:100%;display:block;margin:0;padding:0;}.table-responsive{width:100%;overflow-y:hidden;overflow-x:auto;}table{width:100%;border-collapse:collapse;}td{min-width:200px;} |
|---|---|
Style te mogą być oczywiście modyfikowane przez Ciebie. Dodałem tutaj najprostszy przykład. W stylach ustalamy dwie główne rzeczy. Po pierwsze dla elementu.table-responsiveustawiamy szerokość równą 100% i ukrywamy przewijanie w pionie, ale ustawiamy przewijanie w poziomie na automatyczne. Następnie dla każdego<td>ustawiamy minimalną szerokość np.200px. Oczywiście ta wartość jest tylko przykładowa i może być przez Ciebie zmieniona. Czy już wiesz o co chodzi?
Mając np. 5 kolumn w tabeli otrzymujemy tabelę która na szerokość musi mieć co najmniej1000px. Jeśli szerokość ekranu będzie mniejsza, pojawi się poziomy scrollbar do przewijania tabeli w poziomie, aby zobaczyć pozostałe dane. Prawda, że proste?
Jest to najprostsza skuteczna metoda z tych dzisiaj dostępnych. Jednak nie jest ona najwygodniejszą opcją jeśli chodzi o UX na urządzeniach mobilnych. Mają one małe ekrany i nadal może być ciężko z czytelnością, szczególnie tabel, które będą długie w pionie.
Atrybut data-head
Lepszym i skuteczniejszym rozwiązaniem jest skorzystanie z atrybutówdata. Niestety to rozwiązanie jest znacznie bardziej skomplikowane. Wspomnę też, że wsparcie dla atrybutówdatajest częściowe dla IE starszego od wersji 10 włącznie oraz dla Opery Mini. Jeśli więc praktykujesz wsparcie dla tych przeglądarek, zainteresuj się jakie atrybuty zostaną poprawnie odczytane przez te przeglądarki.
Na czym polega ta metoda? Zbudujmy sobie prostą tabelę. Zauważ jednak, że dodam do każdego elementu<td>atrybutdata-head.
| 1 2 3 4 5 6 7 8 9101112131415161718192021222324252627282930313233343536373839404142 | <table><thead><tr><th>ID pracownika</th><th>Imię i nazwisko</th><th>Stanowisko</th><th>Zarobki</th></tr></thead><tbody><tr><tddata-head="ID pracownika">1</td><tddata-head="Imię i nazwisko">Jan Kowalski</td><tddata-head="Stanowisko">Kierownik</td><tddata-head="Zarobki">10000</td></tr><tr><tddata-head="ID pracownika">2</td><tddata-head="Imię i nazwisko">Jan Kowalski</td><tddata-head="Stanowisko">Prezes</td><tddata-head="Zarobki">8500</td></tr><tr><tddata-head="ID pracownika">3</td><tddata-head="Imię i nazwisko">Jan Kowalski</td><tddata-head="Stanowisko">Dyrektor</td><tddata-head="Zarobki">7000</td></tr><tr><tddata-head="ID pracownika">4</td><tddata-head="Imię i nazwisko">Jan Kowalski</td><tddata-head="Stanowisko">Developer</td><tddata-head="Zarobki">3500</td></tr><tr><tddata-head="ID pracownika">5</td><tddata-head="Imię i nazwisko">Jan Kowalski</td><tddata-head="Stanowisko">Grafik</td><tddata-head="Zarobki">5000</td></tr></tbody></table> |
|---|---|
Tak jak napisałem powyżej, mamy tutaj dodatkowy atrybutdata-head. Jego zawartość zawiera to co normalnie będzie się wyświetlać w nagłówku tabeli. Przeanalizujmy teraz style naszej nowej, responsywnej tabeli.
| 1 2 3 4 5 6 7 8 910 | table{max-width:500px;width:100%;border-collapse:collapse;}td,th{padding:5px;border:1pxsolid#333;} |
|---|---|
Powyższy kod ustawia podstawowe style dla tabeli i komórek. Nie wykonuję tutaj nic nowego. Następnie ustalamy już style dla urządzeń mobilnych. Ja w tym przypadku ustaliłem sobie breakpoint na600px.
| 1 2 3 4 5 6 7 8 9101112131415161718192021222324252627282930 | @media(max-width:600px){table{display:block;}thead{display:none;}tbody{display:block;width:100%;}tr{width:100%;display:block;border:1pxsolid#333;margin-bottom:15px;}td{display:block;border:0;}td::before{content:attr(data-head)": ";}} |
|---|---|
Na początek ustawiamy elementtablenadisplay: block. Jest to dosyć nieciekawy i nieczytelny zapis dla innych programistów, którzy mogą przejąć projekt po nas, ale niestety jest to konieczne, aby wykonać responsywną tabelę w ten sposób.
Następnie ukrywamy elementthead, o czym wspomniałem już wcześniej.display: blockustawiamy również dla kolejnych elementów tj.tbody,tritd. Pozostałe style to tylko kwestia czytelnego wyświetlenia tych elementów. Nas interesuje najbardziej końcówka powyższego kodu.
Ostylowujemy tutaj pseudoselektor::beforedo którego wstawiamy wartość atrybutudata-headzapisany w kodzie HTML. Robimy to za pomocąattr(data-head), który wpisujemy do zawartości pseudoselektora przez właściwośćcontent. Oczywiście w tym miejscu nic nie stoi na przeszkodzie, aby również ostylować i wyróżnić taki pseudoselektor.
Zadanie 1
Twoim zadaniem jest dopisanie do pseudoselektoratd::beforecontentu, który będzie pobierany z atrybutudata-head. Pseudoselektor ten powinien zawierać content tylko dla urządzeń z ekranem mniejszym bądź równym600px.
Podsumowanie
W tej lekcji poznałeś dwa sposoby na stworzenie responsywnej tabeli, która będzie czytelna na wszystkich urządzeniach mobilnych. Drugi sposób doskonale nadaje się nawet do bardzo dużych ilości danych. Zapraszam Cię do kolejnej, ostatniej już lekcji w której poznasz ciekawostki dotyczące Responsive Web Design.