html表格必须用和，因屏幕阅读器依赖它们识别数据范围：无则首行被误读为普通数据，无则动态加载行可能被忽略；caption应紧贴开头说明用途，须带scope属性建立行列关联，避免用div模拟表格。

HTML表格语义化不是“锦上添花”，而是可访问性、SEO和长期维护的底线；移动端布局混乱的根本原因，往往不是CSS写得不够多，而是

结构本身没立住——table-layout: fixed必须配合明确的th/td宽度，且thead和tbody不能缺。

为什么<table>必须用<code><thead>和<code><tbody> <p>屏幕阅读器依赖这些标签识别数据范围：没有<code>thead，它会把第一行当普通数据读；没有tbody，滚动时动态加载新行可能被忽略。Directus的v-table早期版本就因省略这两层，导致NVDA读表时跳过全部列头。

• caption应紧贴table开头，用于说明表格用途（如“用户管理列表”），不可用div模拟
• th必须带scope="col"（单列）或scope="row"（首列），否则辅助技术无法建立行列关联
• 避免用div + display: table替代原生table——ARIA属性再全也骗不过DOM解析器

移动端错乱的根源：默认table-layout: auto

浏览器默认按内容撑开列宽，长文本或未设width的th会让整张表溢出视口。加overflow-x: auto只是把问题藏进滚动条，用户无法双指缩放，也破坏阅读流。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 必须显式声明table { table-layout: fixed; width: 100%; }，否则th:nth-child(2) { width: 25%; }无效
• 所有关键列都该设百分比宽度（如th:nth-child(1) { width: 15%; }），未设宽度的列会被压缩到最小内容宽
• 配合td, th { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }，防止换行撑高行高

Directus等框架中v-table组件的重构陷阱

这类组件常把tr渲染成div，再靠grid-template-columns模拟表格——视觉像，但DOM是假的。重构时最容易踩三个坑：

• 直接替换标签却不重写CSS：原.v-table tr选择器失效，需同步改为table tbody tr
• 排序箭头用伪元素::after插在th里，但scope属性漏加，导致排序状态对屏幕阅读器不可见
• 分页栏用div.pagination挂在表格外，应改用tfoot包裹，保持语义闭环

真正难的不是写对table-layout: fixed，而是让每一列的width值经得起不同数据长度的考验——比如“操作”列固定80px，而“描述”列用calc(100% - 240px)留白，这种计算必须在th上生效，而非父容器。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！