必须用<table>而非div布局，因其语义正确、打印不折行、屏幕阅读器可读；需写全<thead><tbody>、每个<th>加scope="col"；价格列用CSS右对齐与等宽字体，移动端用data-label堆叠实现无滚动清爽体验。
表格结构必须用 <table> 而不是 div 布局
用 <div> 模拟表格看似灵活，但会破坏语义、影响打印样式、屏幕阅读器无法正确识别行列关系，报价单这种强结构化数据必须用原生 <table>。表头用 <thead> 包裹 <th>，主体用 <tbody>，避免把所有行都塞进 <tr> 里不加区分。
常见错误：漏掉 <thead> 导致打印时每页都不显示标题；把金额列写成纯文本（如 ¥1200）而不加 <td> 标签，导致 CSS 无法统一右对齐。
-
<th>只用于真正意义上的列标题（如“项目”“数量”“单价”），不要用来“撑宽度”或“画线” - 每行
<tr>内<td>数量必须和<th>一致，否则表格错位 - 合计行建议放在
<tfoot>里，打印时更易固定在底部
金额列要右对齐 + 等宽字体 + 千分位分隔
报价单里数字对齐直接影响可读性。左对齐的金额列眼睛要反复定位小数点，容易看错。CSS 必须单独控制：
.amount {
text-align: right;
font-family: "Consolas", "Courier New", monospace;
padding-right: 8px;
}
别依赖 JavaScript 格式化——静态报价单不需要运行时逻辑。用 HTML 实体 或 Unicode 细空格 \u2009 手动补千分位更可靠（比如把 12000 写成 12 000.00），避免某些旧邮件客户端不执行 JS。
立即学习“前端免费学习笔记（深入）”；
- 慎用
colspan合并金额单元格，会导致后续列偏移，尤其加了边框后视觉混乱 - 货币符号（¥ / $）统一放在数字前面，不要混用
<span>包裹，否则影响text-align: right的基准点 - 小数点后统一保留两位，哪怕整数也写成
1200.00，避免对齐跳变
打印时表格断页错乱怎么修
浏览器默认会在任意位置断页，导致表头消失、金额行被切成两半。核心是两处 CSS：
thead { display: table-header-group; }
tr { page-break-inside: avoid; }
注意：page-break-inside: avoid 对 <tr> 生效的前提是该 <tr> 在 <tbody> 内，且没有设置 display: block 类样式。很多框架自带的 table 样式会偷偷改 display 属性，要检查 computed style。
- 不要给
<table>设固定高度，否则强制截断内容 -
<tfoot>里的合计行如果内容多，手动拆成两行（如“合计金额”和“¥123,456.00”分两<td>），比硬扛断页更稳妥 - 测试务必用 Chrome 的“打印预览”（Ctrl+P），而不是仅看页面渲染效果
导出为 PDF 时边框丢失或变粗
多数浏览器打印 PDF 时会忽略部分 border 样式，尤其是 border-collapse: collapse 在 PDF 里常失效。最稳方案是不用 border，改用 outline 或背景色模拟分割线：
td, th {
outline: 1px solid #ccc;
background-clip: padding-box;
}
或者更彻底：用 <hr> 放在每个 <tr> 底部（需调整 margin），虽然语义稍弱，但 PDF 兼容性 100%。
- 避免用
box-shadow模拟边框，PDF 完全不支持 - 字体大小低于
10px的单元格在 PDF 里可能糊成一片，最小用10.5px - 彩色背景在黑白打印机下可能变成深灰块，关键行用浅灰（
#f5f5f5）而非蓝色
实际做报价单时，样式越少越稳——优先保证数据准确、对齐清晰、打印不断行，花哨的渐变或图标反而增加出错概率。
