Długo mnie to męczyło, aż… przestało, bo znalazłem rozwiązanie 😉 Poziomy suwak w tabeli HTML wyświetlanej na małych ekranach nie zawsze zostaje uwzględniony w kodzie stron / szablonów.
Rozwiązanie dla pojedynczych tabel
Wychodząc naprzeciw tym dziwnym deficytom wystarczy kod tabeli umieścić w divie:
<div style="overflow: auto;">
<table>
....
</table>
</div>
i gotowe – na urządzeniach z ekranem dotykowym oprócz dolnego suwaka jest możliwość przesuwania tabeli palcem.
Brak możliwości przesunięcia tabeli uniemożliwiał jej pełne odczytanie na małych ekranach, co było jawną dyskryminacją mobilnych 😉
Jednak to rozwiązanie jest niepraktyczne w przypadku stron z dużą liczbą tabel – owijanie każdej po kolei w diva to strata czasu. W takim scenariuszu potrzebne jest automatyczne rozwiązanie globalne…
Kod CSS dodający funkcje przesuwnych tabel do całej strony www
Zapytałem Gemini AI o rozwiązanie, ale z drobnymi wymogami:
- bez dodatkowych wtyczek i skryptów
- bez edycji plików .php
- dla motywu Kadence
- lekki kod CSS
Oprócz kodu otrzymałem praktyczną instrukcję optymalizacji www:
Oto gotowy blok kodu do wklejenia w Wygląd > Dostosuj > Dodatkowy CSS:
/* Suwak dla tabel tylko na urządzeniach mobilnych (poniżej 768px) */
@media screen and (max-width: 768px) {
.entry-content table {
display: block;
width: 100% !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* Płynność na iPhone */
border-collapse: collapse;
margin-bottom: 1.5em;
}
/* Ustawienia dla komórek przy dużej ilości tekstu */
.entry-content table td,
.entry-content table th {
min-width: 150px; /* Zapobiega ściskaniu tekstu w "słupki" */
word-wrap: break-word;
vertical-align: top;
padding: 12px !important; /* Ładniejszy odstęp w Kadence */
}
}
Dlaczego ten kod jest idealny pod Kadence?
- Celność: Klasa
.entry-contentw Kadence obejmuje dokładnie to, co wpisujesz w edytorze (zarówno na Stronach, jak i we Wpisach), nie ruszając tabel w nagłówku, stopce czy widgetach. - Selektywność: Dzięki
@media screen and (max-width: 768px)na komputerze Twoje tabele będą wyglądać standardowo (rozciągnięte na całą szerokość lub według Twoich ustawień), a suwak pojawi się tylko wtedy, gdy ktoś wejdzie na stronę z telefonu lub tabletu. - Czytelność przy dużym tekście: Ustawiłem
min-width: 150px. Przy dużych tabelach to kluczowe – bez tego przeglądarka próbowałaby „upchnąć” tekst, co przy 5-6 kolumnach na ekranie telefonu kończy się nieczytelnym bałaganem. Teraz każda kolumna będzie miała co najmniej 150px szerokości, co wymusi pojawienie się suwaka.
Mała rada techniczna
Jeśli po wklejeniu kodu tabela nadal wydaje się zbyt ciasna, po prostu zwiększ wartość min-width: 150px; na np. 200px;. Im więcej masz tekstu w komórkach, tym większa powinna być ta wartość, aby czytanie było komfortowe.
