.table-container {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background:
linear-gradient(to right, white 30%, rgba(255,255,255,0)),
linear-gradient(to right, rgba(0,0,0,0.08), rgba(0,0,0,0) 100%) left / 10px 100% no-repeat,
linear-gradient(to left, white 30%, rgba(255,255,255,0)),
linear-gradient(to left, rgba(0,0,0,0.08), rgba(0,0,0,0) 100%) right / 10px 100% no-repeat;
background-attachment: local, scroll, local, scroll;
}La dashboard-urile interne, reflexul multor echipe e să ignore mobilul până când patronul sau directorul de vânzări deschide linkul din mașină. La un proiect B2B cu vreo 14.000 de utilizatori lunari, am descoperit că aproape 25% din sesiuni veneau de pe telefoane sau tablete, iar interfața era un dezastru inutilizabil.
Nu poți micșora un ecran desktop cu 15 coloane și grafice dense fără să regândești complet cele trei mari probleme: navigarea laterală, tabelele late și grila de KPI-uri.
1. Sidebar collapsible fără hack-uri urâte
Pe desktop, sidebar-ul fix de 260px e sfânt. Pe mobil, dacă îl lași acolo sau îl transformi într-un simplu drop-down sus, pierzi spațiu vertical prețios.
Soluția mea preferată implică un layout bazat pe CSS Grid pe desktop, care trece la display: flex sau grid cu o singură coloană pe ecrane sub 1024px. Sidebar-ul mobil devine un overlay (drawer) absolut sau fixat, activat printr-un simplu data-state="open" pe container.
Trade-off sincer: să adaugi animații pe transformări hardware (translate3d) arată genial la 60fps pe un iPhone 15, dar dacă nu pui un backdrop-filter cu măsură, pe telefoane de buget o să gâfâie browserul când utilizatorul deschide meniul.
2. Tabele masive: Scroll container vs. Card Transformation
Cea mai mare capcană este ideea de a transforma fiecare rând de tabel într-un card stacked pe mobil. Sună bine în teorie, dar când utilizatorul are un tabel de audit cu 50 de rânduri și 8 coloane, obții un scroll infinit de 400 de carduri unde pierzi complet contextul comparativ.
Pentru date dense, prefer un container de tabel cu overflow-x: auto, dar cu două detalii obligatorii:
- Coloana cheie înghețată: prima coloană (de exemplu, numele clientului sau ID-ul) stă
position: sticky; left: 0cu unz-indexși un fundal solid. - Indicator vizual de scroll: un umbră discretă pe margine care apare doar când există conținut ascuns în dreapta (shadow scroll trick din CSS gradient).
Dacă tabelul are sub 4 coloane, da, display: block și transformarea celulelor în blocuri cu pseudo-elemente ::before pentru etichete e mult mai curată.
3. Cardurile KPI și auto-fit inteligent
Evit @media query-urile rigide pentru metrici. Un simplu grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) rezolvă 90% din probleme.
Totuși, la ecrane sub 360px (se întâmplă destul de des pe ecrane mici de Android), chiar și 240px forțează overflow dacă ai padding generos. Container Queries (@container) sunt aur curat aici: cardul își poate reduce singur fontul cifrelor de la 2rem la 1.4rem și poate trece iconița deasupra textului fără să-ți pese de lățimea întregului viewport.
Voi cum abordați tabelele cu 10+ coloane pe ecrane mici — preferați scroll-ul orizontal cu coloană fixă sau rescrieți componenta complet pe mobil?