table-layout: fixed 是响应式表格起点，需同时满足table设width: 100%、至少一列显式设宽、避免td用white-space: nowrap；小屏可用data-label+display: block堆叠；报表类宜用水平滚动并加视觉提示。
直接加 width: 100% 或媒体查询隐藏 thead 不解决根本问题——表格在小屏上崩坏，是因为浏览器默认用 table-layout: auto，等所有内容（比如长 URL、图片）加载完才算列宽，窄屏下一列被撑开，整行就歪了。
table-layout: fixed 是响应式表格的起点
必须同时满足三个条件，table-layout: fixed 才真正生效：
-
table元素显式设置width: 100% - 至少有一列通过
<th style="width: 25%">或<col width="200">指定宽度 - 避免在
td上用white-space: nowrap（除非你明确想禁换行）
不设满所有列宽时，剩余空间由未设宽的列平分，容易失衡；IE8+ 支持，但 Outlook 完全不认这个属性——发邮件别用。
小屏下用 data-label + display: block 堆叠每行
适合字段语义强、列数 ≥ 4 的场景（如“下单时间”“收货人电话”），横向滚动会让用户记不住哪列是啥。
立即学习“前端免费学习笔记（深入）”；
- 给每个
td加data-label属性：<td data-label="订单号">ORD-2026-7890</td> - 媒体查询里隐藏
thead和原生tr表格结构 -
tr设display: block，td设display: block; position: relative - 用
td::before { content: attr(data-label); }插入表头文字，别用float或inline-block，窄屏下换行错位风险高
注意：伪元素插入的 label 默认是 inline，若需对齐或换行控制，得加 display: inline-block 或 white-space: nowrap 配合 text-overflow: ellipsis。
报表类表格优先用容器水平滚动
后台数据列表、财务明细这类列多且不能删字段的场景，滚动不是妥协，是合理选择——关键在滚动要顺滑、有提示、不卡顿。
- 外层容器加
overflow-x: auto和-webkit-overflow-scrolling: touch（iOS 惯性滚动） -
table设min-width: fit-content或具体值（如min-width: 1200px），防内容被压缩变形 - 禁用
white-space: nowrap在td上，否则无空格长文本（如 Base64、URL）会直接撑爆容器 - 父容器要有明确宽度，比如
max-width: 100vw；光靠width: 100%不够，可能继承自塌陷父级
容易被忽略的是滚动条视觉提示：纯 CSS 很难统一各平台样式，更务实的做法是在容器底部加一行小字提示“← 可左右滑动 →”，或用 JS 监听 scroll 动态显示箭头图标。
