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