@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 8px;
padding: 0.5rem;
}
td {
border: none;
position: relative;
padding-left: 50%;
text-align: right;
}
td::before {
content: attr(data-label);
position: absolute;
left: 10px;
width: 45%;
text-align: left;
font-weight: bold;
}
}Să fim serioși, nimeni nu vrea să analizeze grafice și tabele complexe de pe telefon, dar clienții o cer mereu. Am avut anul trecut un proiect de monitorizare pentru flote auto cu vreo 12.000 de useri activi, unde managerii voiau să vadă statusul camioanelor din mers, direct de pe mobil. Atunci m-am lovit de realitatea cruntă a tabelelor gigantice pe ecrane de 375px și a meniurilor care mâncau jumătate de ecran.
După zeci de teste și feedback dat cu pumnul în masă de utilizatori, am cristalizat trei reguli simple care salvează orice dashboard pe ecrane mici.
Sidebar-ul: de la desktop la hamburger (sau bottom nav)
Pe desktop, sidebar-ul e sfânt. Îți dă structură și acces rapid la module. Pe mobil însă, trebuie să dispară instant. Am testat varianta cu sidebar redus la iconițe pe mobil, dar e o mizerie vizuală: utilizatorii nu țin minte ce înseamnă fiecare pictogramă mică.
Soluția care a funcționat cel mai bine a fost un sertar (drawer) clasic, declanșat de un hamburger menu. Se deschide peste conținut cu un overlay semi-transparent în spate.
Trade-off-ul sincer: E ușor de implementat cu un simplu transform și o clasă de active, dar adaugi un click în plus pentru orice navigare. Dacă ai doar 3-4 secțiuni mari în aplicație, mai bine renunți complet la sidebar pe mobil și folosești o bară de navigare jos (bottom navigation bar), ca la Instagram. E mult mai ergonomic pentru degetul mare.
Tabelele mari nu se micșorează, se izolează
Cea mai mare greșeală pe care o văd și acum e încercarea de a înghesui 8-10 coloane pe un ecran de telefon prin micșorarea fontului sau a padding-ului. Devine imposibil de citit fără lupă.
Cea mai rapidă rezolvare e să pui tabelul într-un container cu overflow-x: auto. Dar atenție la UX: utilizatorii trebuie să știe că pot da scroll la dreapta. Am rezolvat asta adăugând un indicator vizual subtil — o umbră pe marginea dreaptă a tabelului care dispare când ajungi la capătul scroll-ului, plus un text mic cu „Glisează pentru detalii” pe care îl ascundem pe ecrane mari.
Când tabelul devine listă de carduri (Card Stack)
Dacă datele din tabel sunt critice și trebuie citite rapid (de exemplu, alerte de sistem sau comenzi urgente), scroll-ul orizontal devine obositor. În cazul ăsta, cel mai bine e să renunți complet la formatul de tabel pe ecrane mici și să transformi fiecare rând într-un card de sine stătător.
Pe vremuri făceam asta duplicând markup-ul în HTML (un tabel pentru desktop și o listă de carduri pentru mobil, controlate din display-uri diferite). E o soluție nasolă pentru SEO și performanță, plus că dublezi codul degeaba. Astăzi, poți face asta elegant din CSS, redefinind comportamentul elementelor de tabel prin CSS Grid sau Flexbox pe media queries, folosind atributul data-label pentru a păstra denumirea coloanelor.
La proiectul de flote, după ce am trecut tabelele de alerte la sistemul de card-stack pe mobil, am economisit cam 30% din timpul de suport tehnic pentru că dispecerii nu mai greșeau rândurile când dădeau click de pe teren.
Voi cum abordați problema asta? Mergeți pe scroll orizontal până la capăt sau preferați să re-scrieți structura sub formă de carduri când scade lățimea ecranului?