/* Transformare tabel în Card Stack sub 768px */
@media (max-width: 768px) {
.responsive-table,
.responsive-table tbody,
.responsive-table tr,
.responsive-table td {
display: block;
width: 100%;
}
.responsive-table thead {
display: none; /* Ascundem capul de tabel pe mobil */
}
.responsive-table tr {
margin-bottom: 1rem;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 0.75rem;
background: var(--bg-card);
}
.responsive-table td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid var(--border-light);
text-align: right;
}
.responsive-table td:last-child {
border-bottom: none;
}
/* Injectăm label-ul din HTML în stânga celulei */
.responsive-table td::before {
content: attr(data-label);
font-weight: 600;
color: var(--text-muted);
margin-right: 1rem;
text-align: left;
}
}Am refăcut recent interfața de administrare pentru o aplicație B2B cu vreo 12k utilizatori activi lunar și, evident, mobilul a fost un mic iad. Toată lumea vrea tabele cu 12 coloane și sidebar-uri stufoase, dar le vor afișate lizibil pe un ecran de telefon. În postarea asta vă arăt cum am structurat layout-ul fără să încărcăm proiectul cu librării grele de UI.
Sidebar-ul collapsible: Fără JS complicat când ai CSS Grid
Povestea clasică: pe desktop vrei sidebar fix de 260px, pe tabletă vrei doar iconițe (64px), iar pe mobil un drawer peste conținut. Am văzut mulți juniori care scriu sute de linii de React state și event listeneri doar ca să schimbe o clasă pe body.
Eu prefer un layout bazat pe grid-template-columns și variabile CSS. Când utilizatorul dă click pe toggle, schimbi doar un atribut data-collapsed="true" pe elementul container. CSS-ul se ocupă de tranziție instruit de variabile.
Trade-off sincer: versiunea restrânsă doar la iconițe (64px) arată foarte curat, dar dacă nu pui tooltip-uri bine gândite și accesibile pe touch, utilizatorii de pe tablete vor înjura copios pentru că nu știu pe ce apasă.
Tabele mari pe mobil: Scroll orizontal vs. Cards Stack
Aici e mereu cea mai mare bătălie de UX. Dacă ai un tabel cu tranzacții financiare (dată, ID, client, status, sumă, acțiuni), ai două opțiuni reale:
- Scroll orizontal cu indicator vizual (
overflow-x: auto). E super rapid de pus în pagină și păstrează structura intactă, dar UX-ul pe mobil e mediocru dacă utilizatorul trebuie să tragă cu degetul stânga-dreapta pentru fiecare rând. - Transformarea tabelului în Card-uri (Stack). Fiecare
<tr>devine un block/grid vertical pe ecrane sub 768px, iar header-ul tabelului se ascunde.
La proiectul nostru am combinat abordările: pentru tabele simple (sub 5 coloane) am lăsat scroll orizontal, dar am adăugat o umbră dinamică pe margini ca să se vadă că mai există conținut. Pentru tabelele complexe de date, am transformat rândurile în carduri folosind atributul data-label pe celule.
Rezultatul? Tichetele de suport de tipul „nu văd butonul de export pe telefon” au scăzut cu 60% în prima lună după refactoring.
Un mic detaliu de finețe
Dacă optezi pentru varianta de transformare în carduri, nu uita de butonul de acțiuni principale (Edit/Delete). Pe desktop stau frumos la finalul rândului, dar pe mobil în format card e mult mai intuitiv să le pui fix sus în colțul din dreapta al fiecărui card.
Voi cum abordați tabelele masive pe mobil când PM-ul insistă că „trebuie să se vadă toate datele dintr-o privire”? Preferați refactorizarea în carduri sau scroll-ul orizontal cu primele coloane înghețate (position: sticky)?