table-layout: fixed 是响应式表格起点，须同时设 width: 100%、至少一列显式宽度（如），并避免 white-space: nowrap；≥4列优先用data-label+display:block堆叠；邮件中禁用@media，改用嵌套table+内联样式。
table-layout: fixed 是响应式表格的起点，不是可选项
直接给 <table> 加 <code>width: 100% 或媒体查询，几乎从不生效——浏览器默认用 table-layout: auto，它会等所有内容（比如长 URL、未缩放图片）加载完才算列宽，小屏下必然撑破容器。改成 table-layout: fixed 后，列宽只认第一行 <th> 或显式 <code>width，不依赖内容，渲染快且可控。
但必须同时设 width: 100%，否则 fixed 不生效；<th> 或 <code><col> 上得有明确宽度，例如：<th style="width: 25%">订单号</th>。没设满所有列宽时，剩余空间由未设宽列平分，容易失衡。
IE8+ 支持，但 Outlook（用 Word 渲染引擎）完全不认这个属性，发邮件别用。
data-label + display: block 是卡片切换的核心结构
≥4 列时优先转卡片堆叠，而不是靠横向滚动——字段语义强（如“下单时间”“收货人电话”）时，滑来滑去根本记不住哪列是啥。更稳妥的做法是让每行 <tr> 变成独立区块，每个 <code><td> 带上 <code>data-label 记录原表头。
HTML 中为每个 <td> 添加 <code>data-label 属性：<td data-label="时间">2026-04-18 14:22</td>
媒体查询里隐藏 <thead>，把 <code><tr> 设为 <code>display: block；<td> 设 <code>display: block + position: relative，再用 ::before { content: attr(data-label) } 插入标签。
别用 float 或 inline-block，窄屏下换行错位风险高；也别在 <td> 上加 <code>white-space: nowrap，否则无空格长文本（如 Base64、URL）会直接撑爆容器。
外层容器滚动只适用于报表类表格，且要防卡顿
后台数据列表、财务明细这类列多且不能删字段的场景，水平滚动不是妥协，是合理选择。关键在滚动要顺滑、有提示、不卡顿。
外层容器加 overflow-x: auto 和 -webkit-overflow-scrolling: touch（iOS 惯性滚动）
<table> 设 <code>min-width: fit-content 或具体值（如 min-width: 1200px），防内容被压缩变形
父容器要有明确宽度，比如 max-width: 100vw；光靠 width 不够
禁用 white-space: nowrap 在 <td> 上，否则无空格长文本（如 Base64、URL）会直接撑爆容器
<h3>邮件中根本不能用媒体查询或现代 CSS 表格响应式方案</h3>
<p>绝大多数邮件客户端（Outlook Desktop/iOS、Gmail App、Yahoo Mail）完全忽略 <code>@media 和现代 CSS 布局属性。直接加 max-width: 100% 不仅无效，还可能引发渲染错乱。
邮件中唯一可行的响应式表格方案是嵌套 <table> + 内联样式：用外层 table 控制整体宽度，内层 table 模拟行/列结构，所有样式写死在 <code>style 属性里，不用 class、不用外部 CSS。
别试图用 flex、grid、display: block 或 data-label ——它们在邮件里等于不存在。
复杂点在于：同一份 HTML 要同时满足网页端响应式和邮件端兼容性，必须拆成两套结构，或用条件注释 + 客户端前缀做降级处理。这点最容易被忽略，直到测试阶段才发现 Outlook 渲染全乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
