成绩单必须用<table>+<thead>+<tbody>语义化结构，<th>仅用于表头、<td>须在<tr>内且列数对齐，禁用border="1"和<td readonly>，必设border-collapse:collapse，并用display:table-header-group和page-break-inside:avoid保障PDF打印效果。
用 <table> + <thead> + <tbody> 是唯一合规结构
成绩单不是随便套个 <div> 加 CSS 就能叫“表格”的。屏幕阅读器、打印引擎、PDF 转换工具都依赖语义化标签识别数据关系。<thead> 告诉浏览器“这是表头”，<tbody> 表明“下面是正经数据”，缺一不可。
-
<th>只用于表头单元格（如“学号”“语文”），不能塞进<tbody>里冒充数据 -
<td>必须放在<tr>内，且每个<tr>中的单元格数要对齐，否则渲染错位 - 别用
border="1"这种老式属性——它被现代 CSS 完全接管，且在邮件客户端中表现不稳定 - 如果后端模板输出的是
<td><input value="85"></td>，得手动删掉<input>，换成纯文本<td>85</td>，否则用户点一下就触发聚焦，破坏只读感
readonly 加在 <td> 上完全无效
readonly 是表单控件专属属性，只对 <input>、<textarea>、<select> 生效。<td> 是普通流式元素，加了 readonly="true" 浏览器直接忽略，控制台也不报错——这是复制粘贴教程最常埋的坑。
- 真正实现“只读”，靠的是不放可编辑元素：只要没
<input>、没contenteditable="true"，用户就改不了内容 - 视觉上禁用可加 CSS：
pointer-events: none阻止点击，user-select: none禁止选中，但别动readonly - 千万别写
<td readonly>92</td>——它看起来像代码，实际毫无作用
border-collapse: collapse 必须显式声明
默认浏览器表格边框是分离的（border-collapse: separate），单元格之间有白缝，看着松散不专业。成绩单这种正式文档，必须用 border-collapse: collapse 合并边框。
- 写在
<table>的 style 里最稳：<table style="border-collapse: collapse;"> - 别指望全局 CSS 重置——CMS、邮件模板、PDF 工具经常覆写
table默认样式 - 如果加了
collapse还看到白缝，大概率是某个<td>里有空格、换行符或多余padding，用开发者工具检查盒模型
导出 PDF 时表头丢失或表格断开怎么办
浏览器“打印为 PDF”对 HTML 表格分页支持很弱，<thead> 默认不会重复到第二页，<tr> 也容易被硬切开。
立即学习“前端免费学习笔记（深入）”；
- 强制每页显示表头：
<thead style="display: table-header-group;"> - 防止行被截断：
<tr style="page-break-inside: avoid;">（Chrome/Edge 支持，Firefox 兼容性差） - 最可靠方案是控制总高度：用
@media print { table { font-size: 12px; } }缩小字号，把内容压进一页，比硬扛分页逻辑更省心
复杂点在于：不同 PDF 生成工具（wkhtmltopdf、Puppeteer、浏览器原生打印）对 display: table-header-group 的解析程度不一，真要批量导出，得先挑一个工具固定跑通再上线。
