/* Indicator vizual de scroll folosind doar CSS pure */
.table-responsive-container {
overflow-x: auto;
background:
/* Umbrele care indică scroll-ul */
linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)),
linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 100% 0,
radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)),
radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 100% 0;
background-repeat: no-repeat;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
/* Trucul cheie: local face umbra să se miște cu conținutul, scroll o ține fixă */
background-attachment: local, local, scroll, scroll;
}Am lucrat acum câteva luni la un dashboard de analytics pentru o firmă de logistică, unde dispecerii foloseau tablete și telefoane direct pe teren. Să înghesui un sidebar masiv și tabele cu 12 coloane pe un ecran mic e un coșmar curat. Vreau să îți arăt cum am rezolvat cele trei mari probleme de layout pe mobil fără să încarc proiectul cu librării greoaie de UI.
1. Sidebar-ul hibrid (Collapsible)
La început, am mers pe varianta clasică: sidebar-ul care împinge conținutul principal la o parte. Pe desktop e ok, dar pe tablete strică tot grid-ul paginii. Am trecut la un sistem hibrid pe care îl folosesc acum în aproape orice proiect.
Pe ecrane mari (peste 1024px), sidebar-ul este integrat în CSS Grid-ul principal al aplicației (grid-template-columns: var(--sidebar-width) 1fr). Când utilizatorul apasă pe toggle, doar reducem lățimea variabilei la 70px, păstrând doar iconițele, iar restul paginii se adaptează natural.
Pe mobil, în schimb, sidebar-ul devine complet independent. Îl trecem pe position: fixed cu un overlay pe fundal și folosim transform: translateX(-100%) pentru a-l ascunde în afara ecranului.
Trade-off sincer: CSS Grid transition pe lățimea coloanelor poate provoca jank (sacadări) pe telefoanele mai vechi dacă ai elemente complexe în pagină. Dacă observi asta, e mai sigur să folosești un sidebar cu poziționare absolută și transformări GPU-accelerated pe mobil.
2. Tabelele mari și scroll-ul orizontal controlat
Știm cu toții soluția rapidă: pui un overflow-x: auto pe containerul tabelului și ai rezolvat problema tehnică. Din punct de vedere UX, însă, e o mizerie. Utilizatorul de pe mobil adesea nu își dă seama că mai există date în dreapta ecranului dacă designul nu îi oferă un indiciu vizual clar.
Am rezolvat asta adăugând o umbră subtilă (un gradient) pe marginea din dreapta, care dispare doar când ajungi la capătul scroll-ului. Folosim un truc CSS curat cu background-attachment: local, scroll.
Totuși, dacă tabelul tău are mai mult de 7-8 coloane, scroll-ul orizontal devine obositor pe telefon. Aici intervine ultima tehnică.
3. Card Stack ca alternativă pe ecrane mici
Pentru ecrane sub 768px, cel mai curat mod de lucru este să ascunzi complet tabelul (display: none) și să afișezi aceleași date sub formă de carduri stivuite vertical.
La proiectul de logistică de care menționam, cu aproximativ 12.000 de utilizatori activi lunar, am observat în înregistrările din Hotjar că pe mobil dispecerii abandonau rapid tabelele cu scroll. După ce am implementat varianta de carduri simple (unde fiecare rând din tabel devenea un card de tip listă, cu acțiunile principale vizibile imediat), rata de interacțiune cu detaliile comenzilor a crescut cu 34%.
Trade-off: Trebuie să fii foarte atent la DOM size. Dacă dublezi markup-ul în HTML (o dată pentru <table> și o dată pentru .card-grid), performanța va avea de suferit pe pagini cu sute de rânduri. Dacă ai seturi mari de date, randează condiționat din JavaScript (în React/Vue/Svelte) în funcție de lățimea ferestrei, chiar dacă adaugi un mic overhead la redimensionarea ecranului.
Tu cum abordezi tabelele complexe pe mobil? Mergi pe scroll orizontal sau preferi să transformi totul în carduri?