/* Containerul care permite scroll-ul orizontal */
.table-container {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
table {
width: 100%;
border-collapse: collapse;
}
/* Prima coloană devine sticky pe mobil */
@media (max-width: 768px) {
th:first-child,
td:first-child {
position: sticky;
left: 0;
background-color: #ffffff; /* Evită suprapunerea transparentă */
z-index: 2;
box-shadow: 2px 0 5px -2px rgba(0,0,0,0.15);
}
}Să fim sinceri: nimeni nu vrea să folosească un dashboard plin de grafice și tabele pe telefon. Dar realitatea din Google Analytics te lovește repede în față. La un proiect recent, un SaaS B2B cu vreo 12k utilizatori activi lunar, am avut surpriza să văd că aproape 35% din trafic venea de pe mobil. Erau manageri care voiau doar să verifice rapid niște metrici în drum spre o ședință. Atunci m-am prins că abordarea clasică de responsive nu mai era de ajuns.
Adaptarea unui layout complex nu înseamnă doar să pui flex-wrap peste tot și să speri că va fi bine. Ai nevoie de strategii clare pentru componentele critice.
Sidebar-ul collapsible: Cum eviți layout shift-ul
Pe desktop, un sidebar de 260px lățime e perfect. Pe mobil, dacă încerci să-l înghesui sau să-l transformi într-o bandă îngustă cu iconițe, utilizatorul nu va înțelege nimic.
Am pățit asta la prima tentativă: am făcut sidebar-ul să se micșoreze la 64px pe ecrane medii. Rezultatul? Textul din elementele de navigare a fost tăiat, iar iconițele erau prea apropiate pentru degetele utilizatorilor.
Soluția care a funcționat a fost o abordare hibridă:
- Pe desktop: Sidebar-ul rămâne fix sau se poate restrânge manual printr-un buton de toggle, împingând conținutul principal.
- Pe mobil (sub 768px): Sidebar-ul devine un drawer (sertar) absolut. Când apeși pe meniul hamburger, acesta glisează de la stânga peste conținut, acoperit de un overlay semi-transparent (backdrop). Conținutul principal nu se mai mișcă, evitând astfel acel layout shift enervant.
Trade-off-ul aici este că ascunzi navigarea în spatele unui click suplimentar pe mobil, dar e o variantă mult mai curată decât să sacrifici spațiul util de citire.
Coșmarul tabelelor dense: Scroll orizontal vs. Card stack
Ce faci când ai un tabel cu 8-10 coloane de date financiare? Dacă le transformi pe toate în carduri verticale pe mobil, pagina devine lungă de kilometri. Utilizatorul își pierde răbdarea și, mai grav, își pierde capacitatea de a compara rândurile între ele.
Pentru tabele unde comparația directă este critică, cea mai bună soluție este să păstrezi structura de tabel, dar să folosești un container cu overflow-x: auto și să faci prima coloană (cea cu numele sau ID-ul) să fie sticky.
În felul acesta, utilizatorul poate glisa tabelul pe orizontală pentru a vedea restul datelor, dar știe în permanență la ce rând se uită pentru că prima coloană rămâne fixată pe stânga.
Când e mai bine să treci la Card Stack?
Dacă datele dintr-un rând sunt mai degrabă descriptive și nu necesită neapărat o comparație directă coloană-cu-coloană, atunci transformarea rândurilor în carduri individuale (card stack) este ideală.
La proiectul menționat, am economisit cam 30% din timpul de dezvoltare pe partea de UI scriind un utilitar CSS simplu. Pe ecrane mari randam tabelul clasic, iar sub 640px ascundeam tabelul complet cu un display: none și afișam o listă de carduri bine aerisite.
Fiecare abordare are plusuri și minusuri. Tabelele cu scroll orizontal și coloană sticky funcționează de minune pentru date dense, în timp ce cardurile sunt ideale pentru fluxuri de aprobări sau liste simple de utilizatori.
Cum gestionați voi tabelele mari pe mobil? Mergeți pe scroll orizontal sau preferați să reconstruiți complet layout-ul sub formă de carduri?