/* Umbră dinamică pentru tabele cu scroll orizontal */
.table-container {
overflow-x: auto;
background:
linear-gradient(to right, white 30%, rgba(255,255,255,0)),
linear-gradient(to right, rgba(255,255,255,0), white 70%) 0 100%,
linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0)),
linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.1)) 0 100%;
background-repeat: no-repeat;
background-color: white;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-attachment: local, local, scroll, scroll;
}
.responsive-table {
width: 100%;
border-collapse: collapse;
white-space: nowrap; /* previne wrap-ul textului în celule */
}Am văzut zeci de dashboard-uri care arată impecabil pe monitoare de 27 de inch, dar devin absolut inutilizabile pe un ecran de telefon. Clienții vor să vadă date complexe din mers, iar noi, ca devi, trebuie să înghesuim tabele cu 12 coloane și grafice stufoase în doar 375 de pixeli lățime.
Hai să vorbim pe șleau despre cum am rezolvat problema asta la un proiect recent cu peste 8.500 de utilizatori activi lunar, unde varianta de mobil era critică pentru oamenii de pe teren.
Sidebar-ul collapsible: Nu reinventa roata cu JS greu
La început, am făcut greșeala să folosesc o librărie greoaie de React pentru sidebar-ul animat. Total inutil. Încărca bundle-ul degeaba și se mișca sacadat pe telefoane mai vechi. Am trecut rapid la o soluție simplă: o clasă CSS și variabile native.
Pe desktop, sidebar-ul ocupă 260px și împinge conținutul. Pe mobil (sub 768px), îl ascundem complet în afara ecranului folosind transform: translateX(-100%) și îl aducem în ecran doar când o clasă .is-open este activă pe body.
Pont de performanță: Folosește întotdeauna will-change: transform pe sidebar ca să forțezi accelerarea hardware. Am redus lag-ul la deschidere la zero, chiar și pe un Android ieftin de acum 4 ani.
Tabelele mari: Bătălia dintre Scroll Orizontal și Card Stack
Aici e marea durere a oricărui front-end developer. Ai un tabel cu utilizatori, tranzacții, statusuri și acțiuni. Cum îl faci să încapă?
Există două abordări mari, fiecare cu un trade-off sincer:
- Card Stack: Transformi fiecare rând într-un card pe mobil. Merge excelent pentru citit date izolate, dar e groaznic dacă userul vrea să compare rapid valorile dintre două rânduri.
- Scroll Orizontal: Păstrezi structura de tabel, dar îl pui într-un container cu
overflow-x: auto.
La proiectul menționat, userii aveau nevoie de comparație rapidă, așa că am mers pe scroll orizontal. Însă, dacă lași scroll-ul simplu, utilizatorul s-ar putea să nu își dea seama că mai există coloane ascunse în dreapta. Soluția? Un indicator vizual de tip shadow-gradient, aplicat pe container. Am folosit un mic truc de CSS cu background-attachment: local, scroll pentru a arăta umbra doar când există conținut de scrollat.
Când tabelul chiar nu are sens: Treci pe CSS Grid
Dacă datele din tabel nu necesită neapărat o comparație directă rând-cu-rând, nu te mai chinui cu tabele. Pe mobil, ascunde tabelul complet cu un display: none și randează un set de carduri flexibile folosind CSS Grid.
Prin abordarea asta am economisit cam 30% la timpul de dezvoltare pe partea de UI. În loc să scriu zeci de linii de CSS ca să formatez elementele <td> și <th> să arate ca niște rânduri de text, am mapat aceleași date într-un grid simplu:
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
Se așază singur perfect indiferent că ești pe un iPhone SE sau pe o tabletă în mod portret.
Voi cum abordați tabelele masive pe ecranele mici? Mergeți pe scroll orizontal cu indicator sau preferați să re-scrieți complet layout-ul sub formă de carduri?