表格样式与可访问性需以语义结构为基础：必须用border-collapse: collapse控制边框，table-layout: fixed配合列宽设置解决列宽不均，thead/tbody分层+display: block实现表头冻结，data-label+媒体查询实现响应式隐藏，scope属性保障读屏准确识别。
表格边框塌陷与间距控制必须用 border-collapse
默认浏览器渲染表格时，cellspacing 和 cellpadding 已废弃，靠它们调间距基本无效。真正起效的是 CSS 的 border-collapse 和 padding。
常见错误是只设 table { border: 1px solid #ccc; }，结果单元格之间留白、边框双线重叠，看着像没对齐。
-
border-collapse: collapse;是硬性前提，否则th/td的边框永远独立计算 - 列宽不均？优先用
table-layout: fixed;配合width设置列（如col:nth-child(2) { width: 120px; }），比在td上反复试更稳定 -
padding只加在th和td上，别加在tr—— 它不接受内边距
表头冻结和内容滚动得靠 thead + tbody + display: block
纯 HTML 表格无法原生冻结表头，但组合语义标签和 CSS 可以低成本实现。关键不是 JS 插件，而是结构分层是否正确。
典型失败写法：table { height: 300px; overflow-y: auto; } —— 整个表格会缩放变形，表头跟着滚走。
立即学习“前端免费学习笔记（深入）”；
- 必须显式写出
<thead><tr><th>...</th></tr></thead>和<tbody>，不能靠 CSS 自动生成 -
tbody设display: block; max-height: 300px; overflow-y: auto;，thead保持display: table-header-group; - 为防列宽错位，
th和td需用min-width或固定width，且两者值要一致
响应式断点下隐藏非关键列要用 data-label + 媒体查询
手机屏塞不下 8 列表格？别删数据，也别用横向滚动条糊弄用户。用属性标记 + CSS 控制显隐，既保语义又省 JS。
错误做法：用 visibility: hidden 或 display: none 直接干掉 td —— 屏幕阅读器读不到，打印时也丢内容。
- 给需要折叠的
td加data-label="操作"，对应th也加相同属性 - 媒体查询里写：
@media (max-width: 768px) { td[data-label], th[data-label] { display: none; } } - 再补一条：
td::before { content: attr(data-label) ": "; font-weight: bold; }，让隐藏列的内容以标签形式前置显示
scope 属性漏写会导致屏幕阅读器误读表格关系
无障碍不是加分项，是表格可访问性的底线。没写 scope 的 th，读屏软件可能把整行都当成“第一列的标题”，尤其多维表头时错乱明显。
现象举例：NVDA 读到 <th>姓名</th><th>年龄</th>，却播报“姓名 年龄”两遍，中间无停顿。
- 单层表头：每个
th加scope="col"（列标题）或scope="row"（行标题） - 复合表头：上层
th用scope="colgroup"，下层对应列用scope="col"，并确保colspan/rowspan数值匹配 - 检查方式：用 Chrome DevTools 的 Accessibility 面板看 “Name” 字段是否准确关联到对应单元格
thead、漏一组 scope，后期补救成本远高于初始写对。 
