成绩单表格必须用<thead>包裹<th>，否则语义失效；浏览器和屏幕阅读器依赖<thead>识别表头，缺失会导致导出Excel表头丢失、无障碍访问失败及CSS选择器失效。
成绩单表格必须用 <thead> 包裹 <th>，否则语义失效
浏览器和屏幕阅读器依赖 <thead> 明确识别表头区域。如果只写 <tr><th>姓名</th><th>数学</th></tr> 而不套 <thead>，会导致导出 Excel 时表头丢失、无障碍访问失败，甚至某些 CSS 选择器（如 thead th）无法生效。
正确结构是：
<table>
<thead>
<tr>
<th>姓名</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>89</td>
<td>92</td>
</tr>
</tbody>
</table>-
<tbody>不可省略——即使只有一行数据，也建议显式包裹，避免部分旧版 IE 渲染错位 -
<th>只用于表头单元格；所有学生成绩行必须用<td>，混用<th>会破坏语义和样式继承 - 若需“合并列标题”（如“期末成绩”下分“数学”“英语”），用
colspan，而非多层<th>嵌套
用 scope 属性让屏幕阅读器准确关联 <th> 和 <td>
默认情况下，屏幕阅读器读取表格时可能无法判断某列数据对应哪个表头。加 scope="col"（列头）或 scope="row"（行头），能明确绑定关系。
例如：
立即学习“前端免费学习笔记（深入）”；
<thead>
<tr>
<th scope="col">姓名</th>
<th scope="col">数学</th>
<th scope="col">英语</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">张三</th>
<td>89</td>
<td>92</td>
</tr>
</tbody>-
scope="row"应用于第一列的<th>（如学生姓名），而不是<td> - 不要对所有
<th>都设scope="col"——只有真正代表列含义的才需要 - 缺失
scope在 WCAG 2.1 中属于 A 级可访问性缺陷，学校系统上线前常被审计卡住
成绩数字要包裹 <span> 或用 data-* 属性做类型标记
纯文本数字（如 <td>89</td>）不利于后续 JS 处理或样式区分（如及格/不及格着色）。直接在 <td> 上加 class 容易污染结构，更稳妥的是用语义化标记。
- 用
data-score存原始数值：<td data-score="89">89</td>，方便 JS 统计平均分 - 用
<span class="score-pass">92</span>区分状态，CSS 可单独控制颜色 - 避免把单位（如“分”）塞进
<td>内容里——它属于视觉修饰，应通过 CSS::after添加，否则影响排序和导出 - 小数成绩（如 87.5）务必保留原精度，不要用
Math.round()隐式截断再渲染
横向滚动与打印适配：别只靠 overflow-x: auto
成绩单列多时（含班级、学号、各科、总分、排名等），桌面端常需横向滚动。但 overflow-x: auto 套在 <table> 外层，会导致打印预览时内容被裁切，且移动端 touch 行为不稳定。
- 正确做法：容器设
overflow-x: auto，<table>设min-width（如min-width: 600px），并禁用table-layout: fixed以防文字换行异常 - 打印时加媒体查询：
@media print { overflow-x: visible; }，同时用@page { size: landscape; }强制横版 - 避免给
<th>或<td>设固定width——不同字体渲染宽度差异大，容易撑破容器 - 真要限制列宽，优先用
max-width+word-break: break-word，而不是white-space: nowrap
表格结构本身不难，难的是在语义、可访问、可维护、可打印之间找平衡点。最容易被跳过的其实是 scope 和 data-score ——它们不改变视觉，但一上线就暴露问题。
