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