GUIDE深度 · Deep dive
Making Tables Responsive
Tables overflow easily on narrow screens. The simplest fix is a wrapper with overflow-x:auto; with many columns, hide secondary columns or switch to stacked cards rather than squeezing text.
Three approaches
Horizontal scroll: wrap in a div with overflow-x:auto.
Hide secondary columns with media queries.
Stacked cards: add data-label and switch cells to blocks on narrow screens.
Readability
Do not shrink text to fit; scrolling is better.
Sticky headers help long tables, but watch stacking contexts.
FAQ
Is horizontal scroll accessible?
Yes, but keep it keyboard-focusable and show a scrollbar.
When should I split a table?
Split when there are too many columns or different meanings.