尝试用div实现布局遇嵌套问题 如何用HTML table制作PDF产品标签模板

针对需要批量生成打印PDF的产品标签场景，HTML Table的布局稳定性远优于纯Div实现，完全可以匹配跨行跨列结构需求，没有必要纠结Div布局的嵌套适配问题。

全局布局匹配逻辑 #

首先按照要求的四列固定占宽9.57%、30.85%、40.43%、19.15%，通过<colgroup>标签强制锁定全局列宽，再通过单元格合并完全匹配给出的结构示意：

• 最左侧列（9.57%占宽）：从首行到末行全跨行放置CODE内容，设置对应总逻辑行数的rowspan属性，不需要做垂直拆分
• 最右侧列（19.15%占宽）：同样全列跨行放置BARCODE内容，和左侧CODE列对称布局
• 第二列（30.85%占宽）：从上到下拆分为4个垂直区块
  • 第一区块：放置CONTROL内容
  • 第二区块：放置OPTIONAL 1内容
  • 第三、第四区块：合并单元格放置IMAGE内容
  • 第五区块：放置OPTIONAL 2内容
• 第三列（40.43%占宽）：从上到下拆分为3个垂直区块
  • 第一、第二区块：合并单元格放置DESCRIPTION内容，垂直方向和旁边的CONTROL、OPTIONAL1区块对齐
  • 第三、第四区块：内嵌双列结构的小表格，左侧放置UNITS PER CARDS内容，右侧上下拆分依次放置OPTIONAL 4、OPTIONAL 5内容
  • 第五区块：放置OPTIONAL 3内容，垂直方向和旁边的OPTIONAL2区块对齐

打印场景的必做适配 #

• 全局表格设置border-collapse: collapse，避免打印时出现边框间隙错位
• 列宽值直接写在中，禁止浏览器根据单元格内容自动调整列宽，保证比例严格符合要求
• 统一设置单元格内边距，清除浏览器默认的单元格边距，防止不同长度的内容撑开单元格、破坏布局比例
• 转PDF时关闭“页面自适应缩放”选项，保证标签实际打印尺寸和设计规格1:1匹配
• 列内部的复杂嵌套拆分（比如40.43%列内的双块拆分）优先用单元格内嵌小表格实现，不要叠加多层Div计算高度，避免不同打印引擎渲染时出现布局偏移

纯Div+Flex布局在跨浏览器转PDF的场景下，很容易出现列宽偏移、跨行不对齐的问题，很难满足固定尺寸产品标签的打印精度要求。而Table的网格对齐逻辑天然适配这类强约束的固定比例结构，渲染一致性远高于Div方案。

内容的提问来源于stack exchange，提问作者andrer0cha