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