打印table如何换页自动加标头以及如何解决多表格边框粗

问题背景

在编写 html table template 转换成 pdf 开发过程中，遇到了两个常见的 HTML 表格问题：

1. 两个相邻<table>元素连接处边框变粗

2. 表格内容过长时换页如何保留表头

解决方案

1. 内容打印换页加表头

要在打印内容时更改页面时自动添加标题，我们需要将完整的和结构添加到表中，然后才能实现这种效果。示例如下：

<table>
  <thead>
    <tr>
      <th>R</th>
      <th colspan="2">各种信息</th>
      <th>Duration</th>
      <th>Chargeable Unit</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格内容 -->
  </tbody>
</table>

2. 解决连接处边框变粗问题

可以利用 css 解决多表格连接边框粗的问题，如下：

table + table {
  margin-top: -1px;
}