说明书表格应扁平化设计，仅用一层+，禁用嵌套表格；表头必须用并设scope属性；外层加overflow-x:auto容器实现横向滚动；打印时强制边框、防跨页断裂并预留页眉空间。
表格结构要扁平，别嵌套
说明书最怕把 <table> 当布局工具用——比如在单元格里再塞一个表格来“对齐文字”。这会让语义混乱、响应式失效，屏幕阅读器也读不出逻辑。说明书本质是「信息对照」，不是「像素对齐」。
<p>正确做法是用一层 <code><thead> + <code><tbody>，每行一个条目，每列一个维度（如“步骤”“操作”“注意事项”）。需要横向分组？用 <code>colspan；纵向合并说明项？用 rowspan，但仅限真正属于同一含义的单元格（比如某一步骤跨两行描述）。
- 避免：
<td><table>...</table></td> - 允许：
<td colspan="2">长说明文本</td> - 慎用：
rowspan超过 2 行——人眼难追踪，打印时容易断页错位
表头必须用 <th>，且带 <code>scope 属性
很多说明书导出 HTML 时直接用 <td> 写标题，结果辅助技术无法判断哪列对应哪行。浏览器和读屏软件靠 <code>scope="col" 或 scope="row" 建立关联。
比如三列表格：“序号”“动作”“结果”，第一行三个 <th> 都加 <code>scope="col"；如果某行左侧是类别名（如“网络设置”），它下面几行都属该类，则那个类别单元格用 <th scope="row">。
<ul>
<li>错误：<code><td>参数名</td>
<th scope="col">参数名</th>
style="white-space: nowrap;" 防止表头被截断移动端适配不能只靠 width="100%"
width="100%" 只让表格撑满容器，但内容挤成一团，小屏根本没法看。说明书常含代码片段、命令或路径，这些必须可读。
核心是「让表格可横向滚动」，而不是强行缩放文字。给 <table> 外层加一个带 <code>overflow-x: auto 的容器，再配合 table-layout: fixed 和明确的 min-width 列宽（尤其对 <code> 类内容）。
- 必需包裹：
<div style="overflow-x: auto;"> <table style="table-layout: fixed; width: 100%;"> ... </table> </div> - 关键列设宽：
<col style="min-width: 180px;">（比如放npm install --save-dev这种命令） - 别用
font-size: smaller强行缩小——用户会眯眼，反而降低可读性
打印时隐藏无关元素，但保留边框与分页控制
说明书常需打印，而默认表格在 A4 上可能被截断、边框消失、跨页错乱。CSS @media print 必须显式声明。
重点不是“看起来像 Word”，而是确保每页有完整行、关键分隔清晰、不出现孤零零的表头或半截行。
- 强制边框：
@media print { table, th, td { border: 1px solid #000 !important; } } - 防跨页断裂：
tr { page-break-inside: avoid; }（注意：部分旧版 IE 不支持） - 删干扰项：
@media print { .no-print { display: none; } }，把操作按钮、返回链接等加class="no-print" - 留页眉空间：打印前用
@page { margin-top: 2cm; }预留装订边
最麻烦的是合并单元格跨页——浏览器渲染不可控，真遇到就拆成两行重复说明，比留白更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
