@media (max-width: 768px) {
.responsive-table,
.responsive-table thead,
.responsive-table tbody,
.responsive-table th,
.responsive-table td,
.responsive-table tr {
display: block;
}
.responsive-table thead {
position: absolute;
top: -9999px;
left: -9999px;
}
.responsive-table tr {
border: 1px solid #e2e8f0;
margin-bottom: 1rem;
border-radius: 8px;
padding: 0.5rem;
}
.responsive-table td {
border: none;
position: relative;
padding-left: 50%;
text-align: right;
}
.responsive-table td:before {
content: attr(data-label);
position: absolute;
left: 10px;
width: 45%;
font-weight: 600;
text-align: left;
}
}Să fim sinceri: e destul de ușor să faci un landing page responsive, dar un dashboard plin de date, grafice și tabele e iadul pe pământ când ajunge pe ecranul unui telefon. La un proiect de logistică cu peste 4.500 de utilizatori activi, majoritatea curieri pe teren, am învățat pe pielea mea că layout-ul clasic de desktop moare rapid pe mobil. Am salvat zeci de tichete de suport tehnic doar regândind trei elemente cheie: sidebar-ul, tabelele și layout-ul de carduri.
Sidebar-ul: collapsed, nu ascuns complet
Marea greșeală pe care o văd des este ascunderea completă a sidebar-ului în spatele unui burger menu, fără nicio altă opțiune intermediară. Pe desktop avem sidebar-ul mare, pe tabletă îl restrângem la stadiul de iconițe (collapsed la vreo 64px lățime), iar pe mobil îl mutăm în partea de jos sau îl facem overlay complet.
Am testat varianta cu iconițe pe tabletă. Merge excelent pentru utilizatorii experimentați, dar e groaznică pentru cei noi care nu știu ce înseamnă fiecare pictogramă. Trade-off-ul e clar: salvezi spațiu pe ecran, dar crești efortul cognitiv. Soluția mea a fost să adaug tooltips obligatorii la hover pe desktop-collapsed și un header clar pe mobil unde meniul slide-out chiar are text explicativ. Niciodată nu lăsa doar iconițe pe mobil, utilizatorii vor da click aiurea și se vor frustra.
Tabelele: scroll orizontal vs. card stack
Aici e marea bătălie. Ai un tabel cu 12 coloane. Cum îl înghesui în 375 de pixeli?
Varianta simplă este un container cu overflow-x: auto. Utilizatorul dă scroll stânga-dreapta. E acceptabil pentru tabele administrative interne, dar e o experiență mediocră pentru clienți.
Pentru proiectul de logistică, am trecut la tehnica de "cards stack" pe ecrane sub 768px. Practic, fiecare rând din tabel devine un card separat.
Trade-off-ul e masiv însă: pierzi complet posibilitatea de a compara rapid datele de pe rânduri diferite. Dacă utilizatorul vrea să compare prețul produsului A cu cel al produsului B, va trebui să facă scroll continuu în sus și în jos prin zeci de carduri lungi.
Sfatul meu: folosește cards stack doar dacă datele din rând sunt de sine stătătoare (de exemplu, detalii comandă). Dacă utilizatorul trebuie să compare valori, lasă tabelul clasic cu scroll orizontal, dar adaugă o umbră subtilă (un gradient transparent) în partea dreaptă ca să semnalizezi vizual că mai există conținut.
Cum transformi tabelul în carduri doar din CSS
Nu ai nevoie de JavaScript ca să faci trecerea asta. Poți folosi proprietatea display: block pe elementele tabelului în interiorul unui media query și atributul data-label pentru a păstra denumirea coloanelor.
Am folosit exact codul de mai jos într-o aplicație de monitorizare flotă și am redus timpul de încărcare al paginii pentru că am scăpat de o librărie greoaie de React-Table care încerca să facă asta nativ din JS.
Concluzie
Nu există o singură soluție perfectă pentru dashboard-uri responsive. Sidebar-ul compact salvează spațiu dar cere tooltips, iar tabelele transformate în carduri sunt lizibile dar distrug comparabilitatea datelor. Voi cum gestionați tabelele masive pe ecrane de telefon?