Tabela responsywna RWD, tworzymy cennik

Tabele są częstym elementem dodawanym do stron internetowych. Zazwyczaj prezentujemy w nich cennik usług. Czy nigdy nie mieliście problemu z wyświetlaniem takiej tabeli? Zwłaszcza na urządzeniach mobilnych, tak, by ładnie prezentowała treść, nie rozwalając jej. Przeważnie jedna strona była szeroka, druga wąska, bez odstępów i było to nieczytelne. Dziś przedstawię Wam bardzo ciekawy sposób wyświetlania tabeli na telefonie. Nie będzie to standardowy wygląd kolumna obok kolumny, lecz dodamy kod, który ułoży nam kolumnę pod kolumną, dzięki czemu treść w tabeli zawsze będzie czytelna.

Dodajemy kod html tabeli do struktury strony:

<table class="table-rwd">
  <tbody>
    <tr>
      <td width="80%">Nazwa pierwszej usługi</td>
      <td width="20%">od 500 zł</td>
    </tr>
    <tr>
      <td>Nazwa drugiej usługi</td>
      <td>od 150 zł</td>
    </tr>
    <tr>
      <td>Nazwa trzeciej usługi</td>
      <td>od 1500 zł</td>
    </tr>
    <tr>
      <td>Nazwa czwartej usługi oraz trochę dłuższy tekst od pozostałych</td>
      <td>od 400 zł</td>
    </tr>
    <tr>
      <td>Nazwa piątej usługi</td>
      <td>od 300 zł</td>
    </tr>
  </tbody>
</table>

Do znacznika „table” dodałam klasę class=”table-rwd”, tak sobie ją nazwałam, dzięki czemu można ją ostylować. Jeśli mamy kilka tabeli na stronie, a nie chcemy by wszystkie wyglądały tak samo, to nadajemy klasę do danej tabeli. W <td> dodałam też szerokość width, by ustawić pierwszą kolumnę szerszą od drugiej. Zrobiłam to procentowo, dlatego będzie responsywna.

Dodajemy kod styli css do pliku styli:

.table-rwd{
	width:100%!important;
	border-collapse:collapse!important;
	margin-bottom:5%;
	table-layout: fixed!important;
}
.table-rwd td,th{border:1px solid #D1DCE0;padding:10px 20px;vertical-align:middle;background:#FFFFFF;text-align:left;}
.table-rwd tr:nth-child(even) td {background:#F2F8F8;}

.table-rwd tbody>tr>:nth-child(2){
font-weight: bold;
}

@media only screen and (max-width: 800px) {
  .table-rwd table, thead, tbody, th, td, tr {
    display: block;
  }
  .table-rwd thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .table-rwd tr { border: 0px; }
  .table-rwd td {
    width: 91%!important;
    border: none;
    border-bottom: 1px solid #D1DCE0;
    position: relative;
    padding-left: 5%;
    margin-left: 0px;
  }
  .table-rwd td:before {
    position: absolute;
    top: 12px;
    left: 6px;
    width: 200px;
    padding-right: 40px;
    white-space: nowrap;
    margin-left: -150px;
  }
}

Tak wygląda nasza tabela, która zyskała piękny, czytelny wygląd:

Poniżej screeny jak wygląda tabela bez dodania szerokości oraz z dodaniem.

Te pogrubienia cen to efekt dodanego kodu css, który działa tylko na drugą kolumnę. A dokładnie znajduje się on w poniższym kodzie:

.table-rwd tbody>tr>:nth-child(2){
font-weight: bold;
}

Kodzie, który mówi, że drugie kolumny będą pogrubione. Można też nadać kolor, rozmiar oraz wiele innych styli.

Dodając kod z regułą dla wersji mobilnej, tworzymy tabelę responsywną i czytelną. Za wersję mobilną do 800px szerokości ekranu odpowiada kod:

@media only screen and (max-width: 800px){}

A kod, który odpowiada za układ mobilny, kolumna pod kolumną to display: block:

  .table-rwd table, thead, tbody, th, td, tr {
    display: block;
  }

Usunięcie go spowoduje, że kolumny będą obok siebie, tak jak w wersji na szersze ekrany.

Wygląd w wersji mobilnej:

Możecie dowolnie kombinować z wyglądem, zmieniając kod styli css. Taka tabelka zawsze będzie czytelna i już nie musicie się martwić, że coś gdzieś ucieknie 🙂