流式表格适配需设 table-layout: fixed 并配合 width: 100%，禁用 white-space: nowrap 全局，优先用 overflow-wrap: break-word，列数≥4时应转卡片布局。
直接设 width: 100% 不等于流式自适应，反而常因 table-layout: auto 和长文本导致列宽崩坏、横向溢出。真正可行的流式适配，必须切断浏览器默认的“内容驱动列宽”逻辑，再用 CSS 控制宽度分配节奏。
table-layout: fixed 是流式表格的前提
浏览器默认用 table-layout: auto，会等所有单元格内容渲染完才计算列宽——小屏下一行里一个长 URL 或未换行的英文单词就能撑开整列，拖垮整表。改成 table-layout: fixed 后，列宽只由第一行 <th> 或 <code><col> 的 width 决定，渲染快且可控。
- 必须配合
width: 100%才生效，单独写table-layout: fixed没效果 <th> 上设 <code>width: 20%比用<col>更直观，也更易维护- IE8+ 支持，但 Outlook（基于 Word 渲染引擎）完全不识别该属性，邮件模板中禁用
- 优先用
overflow-wrap: break-word（现代标准写法），它比word-wrap更可靠 - 对纯数字/URL 字段，加
white-space: nowrap配合overflow: hidden+text-overflow: ellipsis，比硬折行更可控 - 禁用
white-space: nowrap在整张表上，否则长文本会直接撑破容器 - 确保父容器有
max-width: 100vw或width: 100%，不能只靠 flex 布局指望它自动撑满 - 不要给
<table> 设 <code>flex: 1，它不是 flex item 的合理角色；用min-width: fit-content配合滚动方案更稳妥 - 若用 Bootstrap，
.table-responsive本质是外层加overflow-x: auto，但它默认内边距为 0，需手动补padding防边缘贴边 - 每个
<td> 加 <code>data-label属性：<td data-label="状态">已通过</td> - 小屏下用
@media (max-width: 768px)把<tr> 设为 <code>display: block，<td> 设为 <code>display: block并用::before { content: attr(data-label) }插入表头 - 绝对不要用
float或inline-block模拟卡片，它们在窄屏下极易因换行错位，破坏字段对应关系
避免 word-break 错误导致文字挤压或截断
很多人以为加了 word-wrap: break-word 就万事大吉，但实际在 table-layout: fixed 下，break-word 可能让中文词组被强行拆开，英文单词则可能挤进极窄列宽里变成一串不可读字符。
流式宽度分配要避开 flex 容器陷阱
把 <table> 塞进 <code>display: flex 的父容器里，width: 100% 很可能失效——flex item 默认不按百分比伸缩，尤其当父容器没设明确宽度时。
列数多时，别硬撑流式，该转卡片就转
当列数 ≥ 4 或字段语义强（如“创建时间”“操作人”“审批状态”），强行保持表格结构只会牺牲可读性。移动端用户不需要对齐的行列，需要的是信息可定位、标签可识别。
最难的不是写对那几行 CSS，而是判断这张表是否真的适合流式——后台数据列表可以滚动，客户联系表更适合堆叠，而邮件正文里的简单两列表格，width: 100% + table-layout: fixed 就够用。选错策略，再多的 minmax() 或媒体查询都救不回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
