印刷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ページのコードで何が問題になっていますか？

ありがとうございました。このルールは、.pageの子供のすべてのdiv要素がそれの後に改ページスペースを持っていることを宣言している

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

：

Answer 1

これはおそらく犯人です。その論理的な選択であるあなたの印刷メディアクエリ内に置くこと、

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

page-break-afterプロパティは印刷内容のために意図されて：あなたは内部のそのルールを配置する必要があります。