HTML转PDF时表格页脚colspan失效导致布局错乱如何解决

你遇到的colspan失效、表格布局错乱问题，核心有三个原因：

• 表格总列数不固定，每行td的colspan总和不一致，浏览器无法正确计算每列宽度，PDF打印引擎的容错性比普通浏览器页面渲染更低，会直接出现布局错乱
• 仅定义了3个<col>标签，但实际表格列数远大于3，列宽配置和实际结构不匹配
• 代码存在语法错误，最后一行的td未正确闭合，进一步影响渲染逻辑

• 先统一表格总列数：根据你要实现的目标效果，建议统一总列数为22，保证每一行所有td的colspan相加等于22
• 补全或移除<col>标签：如果要自定义列宽，要补全22个col标签，否则直接移除现有col标签，避免配置冲突
• 修复所有标签语法错误，保证所有td都正确闭合
• 给table添加table-layout: fixed;CSS属性，强制使用固定布局模式，打印PDF时渲染效果和页面预览一致性更高

<table class="floating simpletable" border style="width: 100%;table-layout: fixed;">
  <tbody>
    <tr>
      <td colspan="12" style="border-top-style: hidden;"></td>
      <td colspan="10">図番</td>
    </tr>
    <tr>
      <td colspan="12" style="border-top-style: hidden;"></td>
      <td colspan="10">{{$record->workname}}</td>
    </tr>
    <tr>
      <td colspan="12" style="border-top-style: hidden;"></td>
      <td style="border-top-style: hidden" colspan="10">購入仕様書（SES契約）</td>
    </tr>
    <tr>
      <td colspan="12" style="border-top-style: hidden;"></td>
      <td colspan="8">仕様書図番</td>
      <td colspan="2">SHT</td>
    </tr>
    <tr>
      <td colspan="1">版数</td>
      <td colspan="5">年月日</td>
      <td colspan="1">発行</td>
      <td colspan="2">記事</td>
      <td colspan="2">承認</td>
      <td colspan="1"></td>
      <td style="border-right-style: hidden" colspan="10">1/2</td>
    </tr>
    <tr>
      <td colspan="1">発行</td>
      <td colspan="1">{{$record->createdate1}}</td>
      <td colspan="2">{{$record->sdc_manager_name}}</td>
      <td colspan="5"></td>
      <td colspan="1">承認</td>
      <td colspan="1">承認</td>
      <td colspan="1">{{$record->sdc_manager_name}}</td>
      <td colspan="1">{{$record->sesnum1}}</td>
      <td colspan="1">001</td>
      <td colspan="1">2010</td>
      <td colspan="1">~</td>
      <td colspan="1">2101</td>
      <td colspan="3">1/2</td>
    </tr>
  </tbody>
</table>

如果打印PDF时还有边框异常，可以单独给需要隐藏边框的td添加对应方向的border: none样式，比border-style:hidden兼容性更好。

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