纯html成绩单页面应使用语义化结构与css实现，禁用、强制/、设置border-collapse:collapse、用css grid布局多表，并确保打印友好与可访问性。
纯 HTML 成绩单页面不是靠 JS 渲染或表单交互实现的，而是用语义化 <table> 结构 + 合理 CSS 控制视觉呈现。关键在于结构干净、可读性强、打印友好——只要不塞 <code><input>，就天然只读；加了也白加。
为什么 readonly 加在 <td> 上完全没用
<p><code>readonly 是表单控件专属属性，只对 <input>、<textarea></textarea>、<select></select> 有效。<td> 是普通流式元素，浏览器直接忽略该属性，控制台也不会报错。
<ul>
<li>错误写法：<code><td readonly>89</td> → 看起来“禁用了”，实际双击/Tab 还能聚焦（如果意外加了 tabindex），甚至可能被屏幕阅读器误判为可编辑
<input value="89">，换成纯文本 <td>89</td>；结构即权限，不靠属性“声明”只读<input> 的成绩单，前端必须过滤或替换，不能依赖 CSS 隐藏输入框了事<thead> + <code><tbody> 不是可选项，是打印和可访问性刚需
<p>没有 <code><thead>，浏览器在“打印为 PDF”时无法识别表头重复逻辑，第二页开始就没了列名；没有 <code><tbody>，CSS 选择器难定位主体数据，响应式或滚动优化也落空。
<ul>
<li>必须把表头行包进 <code><thead><tr>
<th>姓名</th>
<th>数学</th>
</tr></thead>
<tbody>，哪怕只有一行也要包
<li>打印样式里加 <code>@media print { thead { display: table-header-group; } }，Chrome/Edge 生效，Firefox 需额外测试<div> 模拟表格——屏幕阅读器会读成“一堆段落”，不是“三行四列表格”
<h3>
<code>border-collapse: collapse 是成绩单边框的底线要求
默认 border-collapse: separate 会让相邻单元格边框各自渲染，产生双线间隙，看着松散、不专业，还容易在 PDF 中错位。
- 必须在
<table> 上设 <code>style="border-collapse: collapse;"，或全局 CSS：table { border-collapse: collapse; } - 边框样式要统一加在
table、th、td三者上，例如：border: 1px solid #ccc;，否则会出现“只有外框没内线”或“内线双倍粗” - 别用过时的
cellspacing="0"和cellpadding="5"，这些 HTML 属性已被 CSS 取代，且无法精确控制打印效果 - 打印前建议加
@media print { table { font-size: 12px; } }，字号小一点比强行缩放更稳 - 用一个
<div id="container"> 作 Grid 容器，设 <code>display: grid和grid-template-rows/columns - 每个成绩单包在单独
<div> 里，用 <code>grid-area指定位置，例如#report1 { grid-area: 1 / 1 / 3 / 2; }（占第1–2行、第1列） - 每张表设
width: 100%; height: 100%，确保填满父容器，避免留白或溢出 - Grid 的
gap属性比 margin 更可靠，它不会影响打印分页逻辑
多张成绩单并排？别用 float 或 inline-block，用 CSS Grid
8 个独立成绩单堆在一页时，浮动布局极易错行、换行不可控，尤其内容高度不一致时。Grid 是唯一能精确控制行列占位、适配打印分页的方案。
最容易被忽略的是：成绩单一旦嵌入 JS 动态渲染逻辑，或混用 contenteditable、tabindex，就不再是“只读”了——哪怕你没打算让用户改。结构决定行为，不是 CSS 或 JS 能覆盖的。
