打印表格时如何避免页脚缺少结束线？自定义CSS无边框报表打印问题求助

你可以通过HTML表格原生的tfoot重复打印特性配合CSS打印样式实现需求，无需额外JS计算分页，兼容性更好：

第一步：补充CSS样式 #

在你原有CSS基础上新增以下代码：

/* 统一表格布局，避免列宽错乱 */
table {
  table-layout: fixed;
  width: 100%;
}
/* 开启打印时页脚每页重复渲染特性 */
@media print {
  table tfoot {
    display: table-footer-group;
  }
}
/* 自定义分隔线样式，优先级匹配原有样式的!important规则 */
.table tfoot tr td {
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid #000000 !important;
  height: 1px;
  padding: 0 !important;
}

第二步：修改模板代码 #

在现有</tbody>结束标签后新增tfoot分隔线结构，完整模板修改后如下：

<tbody>
  <div t-foreach="o.get_print_lines_media_carta_led(o)" t-as="d" width="100%">
    <t t-if="d['code'] != 'ls'">
      <tr>
        <td style="width:5%;text-align:left;padding-left: 0.9em !important;" class='letra2'>
          <t t-esc="d['code']" />
        </td>
        <td style="width:20%; text-align:left;padding-left: 0.9em !important;" class='letra2'>
          <t t-esc="d['code_name']" />
        </td>
        <td style="width:25%; text-align:left;padding-left: 0.9em !important;" class='letra2'>
          <t t-esc="d['name']"/>  
        </td>
        <td style="width:10%; text-align:right;padding-right: 0.9em !important;" class='letra2'>
          <t t-esc="'{:,.2f}'.format(d['debit'])" />
        </td>
        <td style="width:10%; text-align:right;padding-right: 0.9em !important;" class='letra2'>
          <span t-esc="'{:,.2f}'.format(d['credit'])"/>
        </td>
      </tr>
    </t>
  </div>
</tbody>
<!-- 新增页脚分隔线结构，合并5列匹配表格列数 -->
<tfoot>
  <tr>
    <td colspan="5"></td>
  </tr>
</tfoot>

注：如果你的表格外层容器设置了overflow: auto/scroll等属性，需要移除该规则，否则会影响tfoot的打印重复渲染特性。

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