当在HTML中的表格上方写入行时，表格在第一页上显示正常，但当将此文本放在下一页时，它会显示在表格的顶部，并且文本重叠。除了第一页之外，其他所有页都是如此。我用@media print试过了，但不管用。表格很长，所以它会自动显示在下一页，所以当我尝试@media print时，它只会让文本显示在表格的顶部。此外，我希望页脚始终位于页面底部，即使表未满，但如果我写postion: fixed;，它会使页脚与表的最后一行重叠，如果我根本不写postion: fixed;，如果表未满，页脚将显示在最后一行的下方，在页面的中间。
下面是代码：

@media print {
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .table-container {
    margin-top: 130px;
  }
}

.page {
  margin: 10px;
  padding: 20px;
  border: 1px solid #fff;
  background-color: #fff;
  page-break-after: always;
}

.container {
  padding: 5px;
}

.info {
  margin-bottom: -10px;
  font-size: 11px;
  line-height: 1.2em;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.date {
  float: right;
  position: absolute;
  top: 5px;
  right: 15px;
  font-size: 13.8px;
}

.text {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: bold;
}

.title {
  font-weight: bold;
  font-size: 15px;
  margin-top: -11px;
  margin-bottom: 8px;
}

.description {
  font-size: 12.8px;
}

.title,
.description {
  line-height: 0.4;
}

table {
  margin-top: 11px;
  width: 100%;
  height: 40%;
  border-collapse: collapse;
  background-color: #ffffff;
}

th {
  padding: 1px;
  text-align: left;
  background-color: #ffffff;
  line-height: 1.2em;
}

tr:first-child {
  border-top: 0.1px solid #000000;
  height: 5px;
}

body {
  line-height: 1.4;
}

h4 {
  font-size: 15px;
  margin-bottom: 10px;
}

table,
th,
td {
  font-size: 12px;
  border: 1px solid black;
}

table,
.page-footer {
  line-height: 1.4;
}

tr:nth-child(26n) {
  page-break-after: always;
}

.page-footer {
  position: fixed;
  bottom: 0px;
  width: 97.3%;
  padding: 3px 1px;
  background-color: #ffffff;
  border-top: 1px solid #000000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.page-footer>div {
  display: inline-block;
}

<div class="header">
  <div class="info">
    <p>Text1 here<br> Text2 here<br> Text3 here</p>
  </div>
  <div class="date">
    <p>8.6.2023</p>
  </div>
  <div class="text">
    <p>Sorting by ID & Date</p>
  </div>
  <div class="title">
    <h4>History and Careplans </h4>
  </div>
  <div class="description">
    <p>This is an example table</p>
  </div>
</div>
<div class="table-container">
  <table>
    <colgroup span="1"></colgroup>
    <thead>
      <tr>
        <th rowspan="2">Meeting</th>
        <th rowspan="2">Nr</th>
        <th rowspan="2">T. ID</th>
        <th rowspan="2">No.</th>
        <th rowspan="2">Action/Event</th>
        <th rowspan="2">Interval</th>
        <th rowspan="2">Aids</th>
        <th colspan="3" scope="colgroup">Effort target</th>

        <th rowspan="2">Expense <br> Material</th>
        <th rowspan="2">Visa</th>
        <th rowspan="2">Execution date</th>
      </tr>
      <tr>
        <th>Height</th>
        <th>Standard [h]</th>
        <th>Species [h]</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="2">2004 06</td>
        <td>1.010</td>
        <td></td>
        <td>Example</td>
        <td>Scope:387 cm Height: 28 m</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      ---More rows---

      <div class="page-footer">
        <div>302 T.</div>
        <div>Page 1 of 17</div>
      </div>
    </tbody>
  </table>
</div>