在顶部打印html表格额外的空格

Question

我想在这里打印一个html表是我的代码和表格，

https://jsfiddle.net/yc17z1jr/

   table {
  margin-bottom: 10px;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
th,td {
  border-width: 1px;
  border-style: solid;
}
th {
  background: gray;
}
.page td {
  border-width: 0;
}
.page div {
  page-break-after: always;
}
@media print {
html, body ,table{
  height: auto;   
}

你可以看到页面顶部有额外的空间3和4我的代码有什么问题？

谢谢。

Answer 1

这可能是罪魁祸首：

.page div {
  page-break-after: always;
}

此规则声明每个.page子节点的div都会在其后面有一个分页符。您应该将该规则放在：

@media print {
    html, body ,table{
       height: auto;   
    }
    .page div {
       page-break-after: always;
    }
}

page-break-after属性用于打印内容，因此将其置于打印介质查询中是合乎逻辑的选择。