标准表格布局必须满足结构、语义、样式三重约束：显式写出thead和tbody，th需带scope属性，table-layout:fixed须配合width和col设置，移动端需外层div包裹并设overflow-x:auto。

标准表格布局不是“写完 table 就完事”，它必须满足结构、语义、样式三重硬约束——缺一不可，否则在 Safari、旧版 WebView 或读屏软件里大概率出问题。

必须显式写出 thead 和 tbody

浏览器不会自动补全它们，哪怕只有一行表头。漏掉 tbody 会导致 Safari 在 overflow-x: auto 下表头无法随内容滚动；漏掉 thead 则让屏幕阅读器失去上下文，把整张表读成“一堆没组织的单元格”。

• thead 必须包裹所有表头行（tr），且其中 th 数量要和 tbody 每行 td 数量严格一致
• tbody 必须存在，不能用 CSS 隐藏来“假装没写”——DOM 结构里得有它
• 如果真没数据行，就写空的 <tbody></tbody>，别删掉标签

th 必须带 scope 属性

不加 scope 的 th 对辅助技术无效。浏览器和读屏软件靠它判断这个表头管的是哪一列还是哪一行，否则用户听到的只是“姓名、张三、李四”，完全不知道“姓名”对应哪一竖列。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 列标题用 <th scope="col">姓名</th>
• 行标题（如课表左侧的“第1节”）用 <th scope="row">第1节</th>
• 不要混用：scope="col" 写在行首单元格里，会误导语义

固定列宽必须配齐三个条件

table-layout: fixed 单独写等于白写。它只是切换计算模式，不提供宽度依据。浏览器看到这个声明后，会立刻去找“每列该多宽”的答案，找不到就退化回内容撑开。

• table 元素必须有明确 width（如 width: 100% 或 width: 800px），不能是 auto 或未设值
• 列宽来源必须存在：优先用 <col style="width: 150px">，且 <col> 必须放在 <thead> 之前、<code><table> 开始之后 <li>父容器要有可计算宽度：比如 <code><div style="width: 100%">，不能是 <code>display: inline 或未设宽的 flex 容器

  移动端横向滚动必须包一层 div

  直接对 table 设 overflow-x: auto 无效，因为 table 是替换元素，其溢出行为不响应该属性。必须用块级容器兜住它，再由容器接管滚动逻辑。

  • 外层 div 设 overflow-x: auto 和 -webkit-overflow-scrolling: touch（iOS 流畅滚动）
  • table 自身不要设 max-width 或 width 超过容器，否则滚动条可能不出现
  • 避免在该容器上用 display: flex，会破坏 table 的固有尺寸计算

  最容易被跳过的不是怎么写样式，而是 caption 标签有没有、col 放没放在 thead 前、以及外层容器有没有真正意义上的宽度——这三个点，一个没到位，表格就在某个设备或某个用户身上悄悄崩了。