table-layout: fixed 不生效是因为缺少三个前提：table 必须显式设置 width（如 width: 100%），至少一列需通过 <col> 或第一行 <th>/<td> 的 width 属性定义宽度，且 <td> 上不能启用 white-space: nowrap，否则内容溢出而非压缩。
table-layout: fixed 为什么总不生效
设了 table-layout: fixed 却还是被长文本撑破容器？不是属性写错了，而是三个前提缺一不可：
-
table元素必须显式声明width: 100%（或具体像素值），不能是auto或未设置 - 至少一列需通过
<col>、<th>的width属性或内联样式指定宽度，例如<th style="width: 15%">状态</th> -
<td>上禁用white-space: nowrap—— 它会阻止换行，导致内容溢出而非压缩
漏掉任意一条，fixed 就退化回 auto 行为。尤其注意 Outlook 等基于 Word 渲染引擎的邮件客户端完全不支持该属性，邮件中慎用。
窄屏下用 data-label 堆叠时语义断裂怎么避免
堆叠后屏幕阅读器读不到表头，用户滑动时不知道当前字段含义——根本问题不是视觉错位，而是 DOM 语义丢失。关键在 data-label 的精确绑定：
-
data-label值必须和对应<th>的文本**完全一致**：大小写、空格、标点都不能差，否则attr(data-label)插入的内容与原始列名对不上 -
<thead>设display: none后，必须补上aria-hidden="true"，防止屏幕阅读器误读隐藏内容 -
<td>要加position: relative，再用::before { content: attr(data-label) ": " }插入标签，不能靠 JS 动态注入或额外 DOM 节点 - 每条
<tr>设display: block，每个<td>设display: block+margin-bottom: 8px，否则堆叠后行与行粘连难区分
列数超 6 列时为什么别硬撑 table 结构
原生 <table> 在宽屏下要重排列顺序（比如把“操作”列提到最前）、或需要跨设备动态合并/拆分字段时，HTML 结构就卡死了。此时用 CSS Grid 模拟更可控：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 用
<div class="row">替代<tr>，<div class="cell">替代<td>，并加role="cell"和aria-label补全语义 - 宽屏用
display: grid; grid-template-columns: repeat(5, 1fr)；窄屏切为grid-auto-flow: row+grid-template-rows: auto - 需要横跨整行的标题或操作栏，用
grid-column: 1 / -1，不用colspan - 注意：Grid 方案无法被 Excel 直接识别为表格，导出 CSV 或打印需额外处理
aria-hidden和备用 DOM
横向滚动方案里容易忽略的体验细节
给表格套 overflow-x: auto 是最快解法，但用户常卡在“找不到可滑动”的临界点：
- 外层容器必须加
-webkit-overflow-scrolling: touch，否则 iOS 滚动惯性消失，手感发涩 -
<table>要设min-width: fit-content或明确值（如min-width: 1200px），防止内容被压缩变形 - 禁用
white-space: nowrap在<td>上——否则无空格长 URL 或 ID 直接撑爆容器 - 父容器不能是
flex且未设宽，否则width: 100%失效；确保其有明确宽度，例如max-width: 100vw
真正难的不是让表格“看起来适配”，而是让每种尺寸下用户能快速定位字段、理解关系、完成操作。data-label 堆叠也好，Grid 重构也罢，所有技术选择都得回溯到这个动作闭环上。
