Html长表打印出来,第一页后填充标题

时间:2018-03-14 03:47:01

标签: html css html5

当我尝试打印跨多个页面的表格时出现问题。 表格标题会重复每一页,这很好,但第一页后的表格标题太靠近页面标题。

我将页边距设置为零,因为我不想打印浏览器页眉/页脚(例如url link,date..etc)。 但似乎第二页在表格标题之前没有边距。

有没有办法在表头前留一些空格?



@page {
  size: auto;
  margin: 0;
}

body {
  margin: 80px 30px 80px 30px;
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 20px;
}

<table style="width:100%">
  <thead>
    <tr>
      <th>header</th>
      <th>header</th>
      <th>header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
    </tr>
  </tbody>
</table>
&#13;
&#13;
&#13;

0 个答案:

没有答案