纯CSS实现响应式表格最稳妥的方式是用overflow-x: auto容器包裹table并设display: block，配合table-layout: fixed和百分比列宽；小屏时建议改用display: block模拟表格结构。
响应式表格的核心思路：用 overflow-x 包裹，列宽用百分比而非固定值
直接说结论：纯 CSS 实现响应式表格，最稳妥的方式是给 table 外层加一个带 overflow-x: auto 的容器，并让 th/td 使用 width: X%（总和 ≤ 100%），避免内容撑破容器。这不是“优雅方案”，但兼容性好、行为可预测，尤其适合数据行数不多、列数固定的管理后台表格。
overflow-x: auto 容器必须设 display: block 且不设 white-space: nowrap
常见错误是把 overflow-x: auto 直接加在 table 上——无效，因为 table 默认是 display: table，不触发块级溢出行为。正确做法是套一层 div：
...
另外，如果表格内有长文本（如 URL、JSON 片段），默认会换行，导致高度不可控；若想强制单行显示再滚动，需在 td 里加 white-space: nowrap，但要小心：这会让横向滚动更依赖用户手动拖拽，且小屏下可能截断关键信息。
百分比列宽的陷阱：table-layout: fixed 必须开启
只写 th { width: 20% } 很可能失效——浏览器默认用自动布局（table-layout: auto），它优先按内容宽度计算列宽，百分比会被忽略。必须显式声明：
立即学习“前端免费学习笔记（深入）”；
table {
table-layout: fixed;
width: 100%;
}
th, td {
width: 20%; /* 5 列示例 */
}-
table-layout: fixed让列宽严格按width属性分配，不随内容伸缩 - 所有列宽百分比之和建议 ≤ 100%，留点余量防四舍五入偏差
- 如果某列内容特别长（比如日志字段），可用
max-width: 0; overflow: hidden; text-overflow: ellipsis;配合white-space: nowrap截断
移动端体验补救：小屏下改用 display: block 模拟表格结构
当列数 ≥ 5 或存在长文本时，仅靠横向滚动体验很差。此时应放弃原生 table，用媒体查询切换为语义化块状布局：
@media (max-width: 768px) {
table, thead, tbody, th, td, tr {
display: block;
}
th, td {
width: 100%;
}
tr + tr {
margin-top: 1rem;
}
}这种写法把每行 tr 变成独立区块，th 和 td 垂直堆叠，读取顺序符合直觉。缺点是丧失了 table 的语义和屏幕阅读器支持，如需无障碍，得额外加 role="table" 等属性。
真正难的不是写这几行 CSS，而是判断什么时候该放弃表格语义、转用卡片或列表；以及是否值得为极少数超长字段做 tooltip 或展开面板——这些决策比代码本身影响更大。
