table 上加 overflow-x 无效，需用外层 div 容器并设 overflow-x: auto 和 white-space: nowrap；table-layout: fixed 需配合显式列宽；小屏应优先用 clamp() 控制字号，禁用影响字体渲染的属性；列过多时宜改用 grid 或块状列表，并确保滚动容器实际溢出。
overflow-x 加在 table 上根本没用
浏览器把 table 当作一个“不可溢出”的渲染单元，overflow-x: auto 作用在它身上会被忽略。真正要加滚动的，是它的父容器——必须套一层 <div class="table-container">，然后把 overflow-x: auto 和 white-space: nowrap 都写在这层 div 上。否则文字自动换行，表格高度被压扁、宽度却失控，反而更难读。
table-layout: fixed 不设列宽等于白配
启用 table-layout: fixed 只是开了个门，不指定列宽，浏览器仍会按内容撑开——小屏下照样挤成一团。必须配合显式列宽控制：
-
th:first-child, td:first-child { width: 120px; }或用百分比（如width: 25%），所有列宽之和建议 ≤ 100% - 避免只给
th设宽而漏掉td，否则数据行可能无视约束 - 长文本需额外加
text-overflow: ellipsis+white-space: nowrap才能显示省略号
小屏强行撑满导致字体糊、字太小
很多方案一上来就 font-size: 12px + width: 100%，结果字小到看不清，还因 subpixel 渲染变虚。这不是响应式，是妥协式压缩：
- 优先用
rem或vw控制字号（如font-size: clamp(14px, 4vw, 16px)），而非固定像素 - 禁用
transform: scale()或translateZ(0)等触发硬件加速的属性——它们会让文本抗锯齿策略降级 - 检查是否意外设置了
-webkit-font-smoothing: none或text-rendering: optimizeSpeed，这两者在小字号下极易发虚
列太多时硬改 CSS 不如重结构
超过 5 列、且含长文本或操作按钮的表格，在手机上靠滚动或缩放永远吃力。此时继续调 table 样式是钻牛角尖：
立即学习“前端免费学习笔记（深入）”；
- 用
display: grid模拟表头+行，配合grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))，天然适配不同宽度 - 每行用
data-label属性存原列名，小屏转为「标签：值」块状列表，语义不丢、可读性翻倍 - 放弃
<table>不代表放弃可访问性：用role="table"、role="row"和aria-labelledby补齐
最常被跳过的环节是：没验证实际渲染宽度是否真超容器。打开 DevTools，选中滚动容器，看 computed 的 width 和 min-width——如果它没超，滚动条根本不会出现，其他所有样式都只是幻觉。
