table-layout: fixed 是解决表格响应式问题的可靠起点，需配合 width: 100%、显式列宽设置且避免 white-space: nowrap 才生效，但 Outlook 等邮件客户端不支持。
table-layout: fixed 是唯一靠谱起点
直接给 <table> 加 width: 100% 或媒体查询，99% 情况下只是表面功夫——表格照样撑破容器、文字挤成一团、列宽忽大忽小。根本原因是浏览器默认用 table-layout: auto，得等所有内容（比如长 URL、未缩放图片）加载完才算列宽，小屏一来就崩。
改成 table-layout: fixed 后，列宽只认第一行 <th> 或显式 width，不依赖内容，渲染快且可控。但必须同时满足三个条件才真正生效：
-
<table>上设width: 100% - 至少一列通过
<th style="width: 25%">或<col width="200">显式指定宽度 - 避免在
<td>上用white-space: nowrap（除非你真想禁换行）
没设满所有列宽时，剩余空间由未设宽的列平分，容易失衡；IE8+ 支持，但 Outlook（用 Word 渲染引擎）完全不认这个属性，发邮件时别用。
小屏 ≥4 列时，data-label + display: block 更可靠
横向滚动对用户极不友好，尤其字段语义强（如“下单时间”“收货人电话”）时，滑来滑去根本记不住哪列是啥。比滚动更稳妥的做法是让每行 <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；光靠width: 100%不够，可能继承自塌陷父级
容易被忽略的是滚动条视觉提示：纯 CSS 很难统一各平台样式，更务实的做法是在容器底部加一行小字提示 “← 可左右滑动 →”，或用 JS 监听 scroll 动态显示箭头图标。
邮件中响应式表格完全不能用 @media
绝大多数邮件客户端（Outlook Desktop/iOS、Gmail App、Yahoo Mail）完全忽略 @media 和现代 CSS 布局属性。直接加 max-width: 100% 不仅无效，还可能引发渲染错乱。
邮件里的表格只能靠传统手段：
- 用嵌套
<table>控制结构 - 所有样式必须内联（
） - 禁用
table-layout: fixed（Outlook 不支持） - 列宽用
<col width="200">或<td width="200">硬编码像素值
真正麻烦的不是写法，而是测试——不同客户端渲染差异极大，最终效果必须在真实环境里逐个验证。
