Jak zrobić responsywną tabelę w WordPress?

Najprostszą responsywną tabelę w WordPressie zrobisz za pomocą HTML i CSS. Dla cennika, menu lub krótkiego zestawienia wystarczy kontener z overflow-x: auto. Gdy tabela ma zawierać dużo danych, sortowanie, filtrowanie albo import pliku CSV, lepiej użyć wtyczki.

Jak dodać responsywną tabelę za pomocą CSS?

Sama właściwość width: 100% sprawia, że tabela dopasowuje się do szerokości dostępnego obszaru, ale nie rozwiązuje problemu bardzo szerokich tabel. Na małym ekranie kolumny mogą stać się nieczytelne albo wypchnąć zawartość poza obszar strony.

Dlatego tabelę należy umieścić w kontenerze, który na telefonie pozwoli przewijać dane w poziomie. To właśnie robi overflow-x: auto. Układ strony pozostaje nienaruszony, a użytkownik może przesunąć tabelę palcem.

Wykonaj następujące kroki:

1. W edytorze WordPress dodaj blok Własny HTML i wklej tabelę.
2. Owiń element <table> kontenerem z klasą table-wrapper.
3. Dodaj klasę responsive-table do tabeli.
4. Wklej kod CSS w sekcji „Dodatkowy CSS” w WordPressie albo w arkuszu stylów motywu.

Przykładowy kod HTML może wyglądać tak:

<div class="table-wrapper">
  <table class="responsive-table">
    <thead>
      <tr>
        <th>Usługa</th>
        <th>Zakres</th>
        <th>Cena</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Audyt strony</td>
        <td>Podstawowy</td>
        <td>300 zł</td>
      </tr>
      <tr>
        <td>Optymalizacja</td>
        <td>Rozszerzona</td>
        <td>600 zł</td>
      </tr>
    </tbody>
  </table>
</div>

Następnie dodaj CSS:

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.responsive-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  border-spacing: 0;
}

.responsive-table th,
.responsive-table td {
  padding: 10px 12px;
  border: 1px solid #d9d9d9;
  text-align: left;
  vertical-align: top;
}

.responsive-table th {
  background: #f2f2f2;
  font-weight: 600;
}

.responsive-table tbody tr:nth-child(even) {
  background: #fafafa;
}

width: 100% pozwala tabeli wypełnić szerokość kontenera. Z kolei min-width chroni zawartość przed nadmiernym ścieśnieniem. Jeśli tabela okaże się szersza niż ekran, kontener uruchomi poziomy przewijak.

Nie ustawiaj sztywnej szerokości całej tabeli, na przykład width: 500px, bez kontenera przewijania. Taki zapis często powoduje pojawienie się poziomego przewijania dla całej strony, a nie tylko dla tabeli.

Po zapisaniu zmian sprawdź tabelę na telefonie lub w narzędziu Chrome DevTools. Zwróć uwagę, czy długie słowa, adresy URL i niełamliwe fragmenty tekstu nie rozciągają komórek. W razie potrzeby możesz dodać:

.responsive-table td,
.responsive-table th {
  overflow-wrap: anywhere;
}

Kod czy wtyczka – co wybrać?

Własny CSS najlepiej sprawdza się przy tabelach statycznych, czyli takich, których zawartość zmieniasz ręcznie. Wtyczka jest wygodniejsza przy tabelach dynamicznych, gdzie dane są obszerne i użytkownik powinien móc je sortować, filtrować lub przeszukiwać.

Jakie wtyczki do tabel w WordPressie wybrać?

Przed instalacją sprawdź, czy wtyczka obsługuje responsywny układ, jest zgodna z używanym edytorem i nie dodaje funkcji, których nie potrzebujesz. Krótki wybór może wyglądać tak:

• TablePress – do większych zbiorów danych, importu i eksportu oraz tabel z sortowaniem, filtrowaniem i paginacją.
• WP Table Builder – do wizualnego tworzenia tabel porównawczych, cenowych i list za pomocą interfejsu typu „przeciągnij i upuść”.
• Advanced Table Addons – do tworzenia tabel bezpośrednio w Elementorze, gdy potrzebujesz dodatkowego widżetu w tym edytorze.
• ElementsKit – do tabel w Elementorze, szczególnie gdy oprócz danych potrzebujesz importu CSV, wyszukiwania, sortowania lub paginacji.

Proces wyboru wtyczki warto oprzeć na kilku pytaniach:

1. Określ, czy tabela będzie statyczna, czy dane będą regularnie aktualizowane.
2. Sprawdź, czy potrzebujesz sortowania, filtrowania, wyszukiwarki albo paginacji.
3. Ustal, czy tabela ma być edytowana w standardowym edytorze WordPressa, czy w Elementorze.
4. Przetestuj gotową tabelę na telefonie i sprawdź jej wpływ na szybkość strony.

Do prostego cennika nie ma potrzeby instalowania rozbudowanego dodatku. Kilka reguł CSS będzie lżejsze i łatwiejsze w utrzymaniu. Wtyczka ma sens wtedy, gdy ręczna edycja wielu wierszy byłaby czasochłonna albo tabela musi reagować na działania użytkownika.

W praktyce zacznij od kontenera z overflow-x: auto i tabeli o szerokości 100%. To wystarczy dla większości prostych tabel w WordPressie. Po wtyczkę sięgnij dopiero wtedy, gdy potrzebujesz funkcji dynamicznych, których sam CSS nie zapewnia.