📱 后台有张十二列明细表，电脑上正常，手机一开横向爆出屏幕，用户说根本没法看。试了两套方案，各有适用面。
第一招，外层包个容器设 overflow-x:auto，表格原样保留，窄屏里横向滚动。改动最小，适合要逐列对比的数据。
第二招，纯 CSS 卡片化。把 table、tr、td 都设 display:block，thead 藏起来，每个 td 用 ::before 带上字段名。每行变成一张小卡片，浏览体验好。
⚠️ 坑：转 block 后 border-collapse 失效，表格线没了，得给 td 单独加边框。列宽也要显式写，否则挤成一团。配合 table-layout:fixed 和百分比宽度，列比例才稳。
其余场景，数据多且要对比用横向滚动，字段浏览为主用卡片化。