table-layout: fixed 是控制表格响应式的核心属性，需配合 width: 100%、显式列宽及避免 white-space: nowrap 才生效；小屏宜转为带 data-label 的块结构，报表类可保留横向滚动但须优化体验。
table-layout: fixed 是唯一能真正控制表格响应式行为的 CSS 属性，不设它，其他所有 width、media query 都只是在修修补补。
为什么 table-layout: fixed 必须加，且常失效？
浏览器默认用 table-layout: auto，要等所有单元格内容（比如长 URL、未限制宽度的图片）加载完才算列宽，小屏一来就撑破容器。改成 fixed 后，列宽只认第一行 <th> 或 <col> 的显式设置，不看内容，渲染快也稳定。
但它必须同时满足三个条件才真正生效：
-
<table>上设width: 100% - 至少一列通过
<th style="width: 25%">或<col width="200">显式指定宽度（百分比优先） - 避免在
<td>上写white-space: nowrap—— 除非你真想禁换行，否则长文本会直接顶开整列
没设满所有列宽时，剩余空间由未设宽的列平分，容易失衡；IE8+ 支持，但 Outlook（用 Word 渲染引擎）完全不认这个属性，发邮件时别用。
立即学习“前端免费学习笔记（深入）”；
小屏下怎么让每行变成带标签的块结构？
横向滚动对用户极不友好，尤其字段语义强（如“下单时间”“收货人电话”）时，滑来滑去根本记不住哪列是啥。更稳妥的做法是让每行 <tr> 退化为独立区块，每个 <td> 带上 data-label 记录原表头。
关键实操点：
- HTML 中为每个
<td>添加data-label属性：<td data-label="订单号">ORD-2026-7890</td> - 媒体查询里隐藏
<thead>，把<tr>设为display: block -
<td>设display: block; position: relative，再用::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或带 padding 的固定容器
最容易被忽略的是：响应式表格的本质不是“让表格缩进屏幕”，而是“小屏下它还该叫 table 吗”。一旦意识到这点，display: block 的堆叠、data-label 的语义保留、甚至放弃 <table> 改用 div + Flexbox，都会变得自然且必要。
