纯HTML只读成绩单需用语义化table结构（thead/tbody），禁用contenteditable和无效readonly属性，CSS控制视觉禁用；边框用border-collapse:collapse；打印时用display:table-header-group和page-break-inside:avoid确保表头重复与不分页。

怎么用纯 HTML 实现只读成绩单表格

纯 HTML 本身不能“生成”动态成绩单，它只是静态结构容器；所谓“只读成绩单”，本质是用

正确组织数据，并通过语义化标签和属性防止误编辑。关键不是功能有多强，而是别让浏览器或辅助工具误判成可编辑内容。

• 必须用

+ + 结构，避免用

模拟表格（屏幕阅读器会读错）

所有单元格用

→ 控制台无报错，但毫无作用

正确思路：只读靠结构保障，不是靠属性“声明”。只要没放 ，用户就改不了内容

如果后端返回的是带 的成绩单，那得删掉所有 ，换成纯文本

成绩单表格该用 border-collapse 还是 border-spacing

默认表格边框是分离的（border-collapse: separate），会产生双线间隙，看着松散不专业；成绩单这种正式文档，必须用 border-collapse: collapse 让边框合并，才干净利落。

• 加在

（表头）或	（数据），禁用 contenteditable="true" 或 tabindex 乱加 如需视觉上“禁用”，靠 CSS 控制，比如 pointer-events: none 或 user-select: none，但不要动 readonly 属性（ 才有，	不认） 为什么 readonly 加在	上完全没用 readonly 是表单控件专属布尔属性，只对 、、 有效；	是普通流式元素，加了也白加，浏览器直接忽略——这是最常被复制粘贴教程坑到的地方。 错误写法：	89	89

的 style 里就行：style="border-collapse: collapse;"

别依赖全局重置，因为有些 CMS 或邮件客户端会覆写 table 默认样式

如果用了 border-collapse: collapse 却还看到白缝，大概率是某列

的重复需求，导致第二页没表头，或整行被硬切开。

• 强制表头每页显示：给

加 style="display: table-header-group;"

禁止行内断开：给

加 style="page-break-inside: avoid;"（Chrome/Edge 支持，Firefox 部分支持）

最稳方案：把成绩单控制在一页内，用 @media print { table { font-size: 12px; } } 缩小字号，比硬扛分页更可靠

表格结构越干净，后续无论是打印、截图还是转 PDF，出问题的概率就越低。别在 HTML 里塞 JS 或 class 名搞“动态渲染”，只读场景下，多一行代码就是多一个故障点。

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

内有 padding 或换行符空格，用开发者工具检查盒模型

导出为 PDF 时表格错位或截断怎么办

HTML 表格转 PDF（比如用浏览器“打印为 PDF”）容易崩，核心原因是分页逻辑不识别