答题卡必须用布局，每题一行，题号列固定宽，单选name统一为"q{n}"，JS校验漏答并聚焦提示，打印时用内联样式和@media print确保PDF正确。
答题卡表格结构必须用 <table> 而不是 div 布局
<p>浏览器对 <code><table> 的行列语义支持更稳定，尤其在打印、缩放或屏幕阅读器下，<code><div> 模拟的“表格”容易错行、丢失题号关联。考试场景下，题号与选项的物理对齐是刚需，不能依赖 CSS Grid/Flex 模拟。
<p>实操建议：</p>
<ul><li>每道题用一个 <code><tr>，题干放 <code><td>，选项用嵌套的 <code><table> 或同一行多个 <code><td>（推荐后者，扁平且易维护）
<li>禁止合并单元格（<code>colspan/rowspan）来对齐选项——会导致导出 PDF 时错位、选中逻辑混乱
<td style="width: 40px;">1.</td>，避免文字长度影响对齐单选题选项必须用 <input type="radio"> 并共享 name
常见错误是给每道题的 radio 设置不同 name（如 name="q1"、name="q2"），这会导致同一题内可多选——浏览器只按 name 分组，不是靠位置或 class。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 第 n 题所有选项的
name统一为"q{n}"，例如第 3 题：四个<input type="radio" name="q3"> - 每个选项加
value（如"A"、"B"），后端或 JS 取值时直接读element.value - 不要用
id替代name控制单选逻辑；id只用于绑定<label></label>，提升点击体验
提交前必须用 JS 校验是否漏答，而非仅靠 required
required 对 radio 无效（浏览器不校验 radio 组是否至少选一个），且无法区分“未作答”和“选了空值”。漏答检测必须手动实现。
实操建议：
- 遍历所有
name以"q"开头的 radio 组：document.querySelectorAll('input[type="radio"][name^="q"]') - 对每组用
Array.from(group).some(r => r.checked)判断是否有选中项 - 漏答时聚焦第一个未答的题号单元格（
tr），而不是弹 alert——避免考生反复点确定却不知哪题漏了 - 禁用提交按钮并添加提示文案，例如在表格下方插入：
<div class="warning">第 7、12 题未作答</div>
导出为 PDF 时表格会变形？关键在 @media print 和内联样式
浏览器默认打印样式会重置表格边框、字体大小、甚至折叠空行，导致答题卡页码错乱或选项挤成一团。
解决要点：
- 所有样式尽量用内联
style，避免外部 CSS 在打印时被忽略 - 强制打印时显示边框：
<table style="border-collapse: collapse;">，并在 <code>@media print中补全：td, th { border: 1px solid #000; } - 禁用分页断行：
tr { page-break-inside: avoid; }，否则一道题被切到两页 - 字体统一用
font-family: "SimSun", "Times New Roman", serif;，避免宋体在 PDF 中渲染异常
复杂点在于不同浏览器对 @media print 解析差异大，Chrome 最可靠，Edge 和 Safari 偶尔忽略 page-break-inside——得额外给每道题的 <tr> 加 <code>style="break-inside: avoid;" 才保险。
