Responsywna tabela HTML/CSS

Czas czytania: 2 minut

Tematem jakim dziś się zajmiemy będą responsywne tabele na stronie internetowej lub jak kto woli RWD Tables. Jak zapewne wiecie responsywność jest obecnie jednym z podstawowych wymogów jakie musi spełnić witryna internetowa a tabelki same z siebie zbytnio takie nie są.

Dlatego też czasem trzeba się trochę nagimnastykować by wyświetlały się one nie tylko ładnie, ale i by dało się je odczytać. Obecnie istnieje kilka metod na uzyskanie responsywnych tabel na stronie. Jedne są bardzo proste inne z kolei wymagają od nas jako ich twórców trochę pracy.

Metody tworzenia responsywnych tabel

Przesuwne tabelki

Zacznijmy może od najpopularniejszej i chyba najprostszej metody dopasowywania tabelek do wymiarów różnych urządzeń czyli – przesuwnej tabelki. Jak nie trudno się domyśleć nazwa jej pochodzi od faktu, że jest to tabela przesuwana (skrolowana). Oczywiście scroll pojawia się dopiero w momencie kiedy sama tabela ma większą szerokość niż jej kontener. W ten sposób ukrywamy nie mieszczące się fragmenty i pokazujemy to co się mieści.

By uzyskać ten efekt tabelę umieszczamy w kontenerze, któremu następnie dodajemy określone cechy i właściwości CSS. Przykładowo może to wyglądać następująco:

<div class="rwd">
  <table>
    /* Zawartość tabeli */
  </table>
</div>

W przypadku tej metody możemy mieć dowolną tabelkę. Istotne jest jednak by umieścić ją w kontenerze o ustawieniach np.:

@media only screen and  (max-width: 760px) {
  .rwd{
    overflow: auto;
    width: 99%;
  }
}

Warto przeczytać: Właściwość CSS overflow

Warto przeczytać: Jak działa Media Query

W powyższym kodzie ustawiłam warunek tak by w sytuacji kiedy szerokość ekranu będzie mniejsza od 760px (maksymalnie osiągnie tą szerokość) zostaną dodane właściwości z nawiasu.

Przykład jak to może wyglądać:

Ustawienie tabelki w pionie

Tym razem by dostosować tabelę do różnych urządzeń musimy ją przygotować. Na początek nagłówek tabelki, czyli elementy ją opisujące muszą znaleźć się w osobnej sekcji, kontenerze np.

    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Info</th>
      </tr>
    </thead>

Z pomocą <thead> oznaczamy nagłówek tabeli. Będzie to istotne w monecie kiedy zmniejszy się ekran.

Następnie do każdego elementu tabeli dodajemy parametr data-label="" oczywiście z odpowiednią zawartością. Konkretnie umieszczamy w nim nazwę elementu np.:

    <tr>
      <td data-label="ID">1</td>
      <td data-label="Name">Anna</td>
      <td data-label="Info">Some Info text</td>
    </tr>

Istotne jest by zwrócić uwagę czy każdy element tabelki posiada odpowiedni znacznik data-label="", jeśli się gdzieś pomylimy wyjdzie to w momencie kiedy wyświetlimy tabelkę na mniejszym ekranie.

Kolejne kroki dostosowywania tabeli nie będą już się odbywały w HTML tylko w CSS. Na początek dodajemy do naszej tabeli ustawienie – table-layout: fixed. Dzięki czemu zmienią się właściwości naszej tabelki.

@media only screen and  (max-width: 760px) {
td, tr { display: block; }
/* Hide table headers */
thead tr {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

tr + tr { margin-top: 1.5em; }
td {
  /* make like a "row" */
  border: none;
  position: relative;
  padding-left: 50%;
  text-align: left;
}
td:before {
  content: attr(data-label);
  display: inline-block;
  line-height: 1.5;
  margin-left: -100%;
  width: 100%;
  white-space: nowrap;
  }
}

Warto przeczytać -> Pseudo elementy :before i :after

Powyższy kod sprawi, że na urządzeniach o szerokości mniejszej niż 760px:

• nagłówek tabeli (thead tr) zostanie ukryty,
• z pomocą tr + tr { margin-top: 1.5em; } dodamy odstęp pomiędzy wierszami tabeli,
• pojawi się nowa kolumna, której zawartość wyświetla się dzięki content: attr(data-label); praktycznie jest to wyświetlenie zawartości – data-label=""

Mam nadzieję, że moje rozwiązania na table RWD na stronę internetową się wam spodobają.

źródła:

• https://www.cssscript.com/pure-css-mobile-friendly-responsive-table/