@media (max-width: 768px) {
.responsive-table,
.responsive-table tbody,
.responsive-table tr,
.responsive-table td {
display: block;
width: 100%;
}
.responsive-table thead {
display: none; /* Ascundem header-ul clasic */
}
.responsive-table tr {
margin-bottom: 1.5rem;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 1rem;
background: #fff;
}
.responsive-table td {
text-align: right;
padding: 0.5rem 0;
position: relative;
border-bottom: 1px dashed #edf2f7;
}
.responsive-table td:last-child {
border-bottom: none;
}
.responsive-table td::before {
content: attr(data-label);
position: absolute;
left: 0;
width: 45%;
font-weight: 600;
text-align: left;
color: #4a5568;
}
}Să fim sinceri: nimeni nu vrea să analizeze grafice și tabele complexe de pe ecranul unui telefon. Dar când 30% din useri îți deschid dashboard-ul în metrou sau la o cafea, n-ai de ales. Am pățit asta la un proiect cu peste 12.000 de utilizatori activi, unde a trebuit să înghesuim un monstru de interfață pe ecrane de 375px.
Sidebar-ul: De la navigație fixă la overlay curat
Pe desktop ai spațiu, pui un sidebar de 240px cu toate opțiunile vizibile și ești fericit. Pe mobil, dacă încerci să-l lași collapsed doar cu iconițe, ai distrus UX-ul. Am observat pe înregistrările din Hotjar că utilizatorii noi pur și simplu nu înțelegeau ce reprezintă pictogramele fără text și dădeau click-uri aiurea.
Soluția pe care am mers a fost radicală: sub 768px, sidebar-ul devine complet ascuns și se transformă într-un overlay de tip sertar (drawer), activat de un buton de hamburger în header.
Trade-off-ul e evident: adaugi un pas în plus (un click) pentru orice acțiune de navigare. Dar pe ecrane mici, prioritatea zero este spațiul pentru date, nu navigația permanentă. Ca să fie fluid, folosesc o simplă clasă .is-open pe body și tranziții CSS pe proprietatea transform: translateX(). Evită să animezi width sau left, altfel o să ai un lag mizerabil pe telefoanele mai vechi.
Tabelele cu zeci de coloane: Scroll orizontal vs. Card stacking
Aici se dă adevărata bătălie. Ce faci când ai un tabel financiar cu 12 coloane?
Prima mea tentativă a fost să ascund coloanele mai puțin importante folosind display: none. Mare greșeală. Am primit zeci de tichete de suport de la oameni care aveau nevoie exact de ID-ul tranzacției sau de statusul plății, coloane pe care eu le considerasem secundare.
De atunci, folosesc două abordări clare, în funcție de specificul datelor:
- Scroll orizontal controlat (pentru date tabulare pure): Pui tabelul într-un wrapper cu
overflow-x: auto. Secretul aici e vizual: adaugă o umbră subtilă pe marginea din dreapta a wrapper-ului ca să indici clar că mai există conținut. Fără acea umbră, utilizatorii cred că tabelul se termină unde se termină ecranul lor. - Card stacking (pentru date de tip entitate): Dacă fiecare rând reprezintă o entitate (de exemplu, un profil de utilizator cu nume, email, rol, status), pe mobil desființez structura de tabel. Folosesc CSS pentru a transforma fiecare rând într-un card de sine stătător.
Cum transformi rândurile în carduri cu CSS curat
Metoda asta e genială pentru că nu trebuie să schimbi deloc markup-ul HTML. Folosim doar CSS media queries și atributul data-label pentru a păstra denumirile coloanelor.
Fiecare celulă (td) devine un element de tip block, iar header-ul clasic al tabelului (thead) este ascuns complet. Denumirea coloanei este injectată dinamic în partea stângă a fiecărei celule prin pseudo-elementul ::before, folosind funcția attr() din CSS.
Este o soluție extrem de curată, dar vine și ea cu un compromis major: pierzi complet capacitatea de a compara rapid valori pe verticală (de exemplu, să compari sumele din două tranzacții diferite). Dar pentru citit și editat date individuale, e de departe cea mai bună variantă.
Voi cum abordați dashboard-urile pe mobil? Mergeți pe tabele cu scroll sau preferați să refaceți complet layout-ul sub formă de carduri?