真正起效的是 table-layout: fixed 配合显式列宽控制，width: 100% 是其生效前提；列少语义强应转卡片堆叠，列多不可删减才用水平滚动，并需优化体验。
直接设 width: 100% 不解决移动端表格错乱，真正起效的是 table-layout: fixed 配合显式列宽控制——没它，长文本、Base64 字段或未截断 URL 会单点撑爆整列，用户得横向滑动半分钟才能找到“状态”在哪。
为什么 table-layout: fixed 必须和 width: 100% 一起用
浏览器默认 table-layout: auto，要等所有图片、脚本、长字符串加载完才计算列宽。小屏下，一个未处理的 JWT 或物流单号就能把某列拉到 500px+，其他列被压缩成一条线。改成 fixed 后，列宽只看第一行 <th> 或 <code><col> 的 width 值，不依赖内容。
-
width: 100%是生效前提：不加这个，table-layout: fixed在多数移动端 WebView 中压根不触发列宽重算 - 推荐直接在
<th> 上写内联样式，比如 <code><th style="width: 20%">订单号</th>；CSS 选择器如th:nth-child(1)在某些旧版 Android WebView 里会失效 - 百分比总和不必严格 100%，缺的部分由未设宽的列均分；但建议设满，避免 iOS Safari 下偶发列宽跳变
- 给每个
<td> 加 <code>data-label属性：<td data-label="下单时间">2026-07-08 14:22</td> - 媒体查询中隐藏
<thead>，设 <code><tr>为display: block，<td>为display: block; position: relative - 用
::before { content: attr(data-label); font-weight: bold; }插入表头语义，别用float或inline-block，窄屏换行错位率高 - 字体别小于
14px，iOS 不会自动放大表格单元格文字，太小易误读 - 外层容器加
overflow-x: auto和-webkit-overflow-scrolling: touch（iOS 惯性滚动） -
<table>设min-width: fit-content，防文字被压缩变形；兼容性要求高时，改用具体值如min-width: 1200px - 禁用
white-space: nowrap在<td> 上，否则无空格长文本（如 JWT、URL）会直接撑破容器 <li>滚动条旁加小字提示：“← 可左右滑动 →”，Firefox/Edge 默认隐藏滚动条，可加 <code>scrollbar-width: thin或自定义伪元素
列数 ≥ 4 时别硬撑横向滚动
字段语义强（如“下单时间”“收货人电话”“物流单号”“预计送达”）的表格，横向滚动体验极差——滑到第三屏，用户早忘了第一列是啥。这时候该转卡片堆叠，不是妥协，是必要取舍。
报表类表格必须水平滚动？关键在顺滑和提示
后台明细、财务流水、日志列表这类字段不可删减、列数固定（如 12 列以上），水平滚动是合理选择，但必须避免卡顿和无感知。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
最常被忽略的点是：没有一种方案能通吃所有场景。列少语义强 → 选堆叠；列多不可删 → 选滚动；后台管理页 → 可结合 JS 动态切换模式。Outlook（用 Word 渲染引擎）完全不支持 table-layout: fixed，发邮件报表千万别用这套。
