Html页面可打印 - 动态表格

Question

我有一个用html编写的可打印页面。在这个页面中，我有一个简单的表格和下面的页脚。 这个表必须是动态的＆＃34;如果行的数量例如大于20（例如），则必须将行的序列放在另一页中。页脚也必须放在第二页的底部。

所有这一切都已完成，但问题是页脚有一个background-color: white; suvol（如Elevation）表格的最后一行（例如第一页的那一行），因此我们看到更多的第一行第一页表格

是否有解决方案不让数组超过A4尺寸页面中的某个长度值？

对页面进行分组的代码：

body {
  margin: 0;
  padding: 0;*/
  color: black;
  background: rgb(204, 204, 204); 
}
  #page {
  background: white;
  display: block;
  margin: 0 auto;
  width: 21cm;
  height: 29.7cm;
}

在桌面上飞过的页脚代码：

    footer {
      width: 21cm;
      position: fixed;
      background-color: transparent;
      bottom: 0;
    }

    footer p:nth-child(1) {
      height: 10px;
      border-bottom: 2px solid #52a2ca;
      text-align: center;
    }

    footer p:nth-child(1) span {
      font-size: 8pt;
      background-color: white;
      padding-left: 2%;
    }

footer p:nth-child(2) {
  float: right;
}

表的代码很简单没什么特别的。

屏幕截图：