2ページ目以降のChrome 53印刷テーブルヘッダーの回避策は2回ありますか？

私のウェブサイトのユーザーは、最初に印刷されたページの内容と2ページ目の表からなるWebページを印刷できる必要があります。ストリップダウンバージョンは（https://jsfiddle.net/jaydeedub/n3qhvtvx/25/でjsFiddle）です：2ページ目以降のChrome 53印刷テーブルヘッダーの回避策は2回ありますか？

HTML：

<body> 
    <button class="button" onclick="window.print()">Print Me</button> 
    <div class="page1"> 
    This is the page 1 content. Blah, blah, blah. 
    </div> 
    <table class="table"> 
    <thead> 
     <tr> 
     <td>Page 2 table header prints twice</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>Page 2 table body</td> 
     </tr> 
    </tbody> 
    <tfoot> 
     <tr> 
     <td>Page 2 table footer</td> 
     </tr> 
    </tfoot> 
    </table> 
</body>

CSS：

@media print { 
    div.page1 { 
    page-break-after: always; 
    } 
} 

.table { 
    border-collapse: collapse; 
    margin: 16px; 
} 

.table>thead>tr>td, 
.table>tbody>tr>td, 
.table>tfoot>tr>td { 
    border: 1px solid black; 
} 

.button { 
    width: 6em; 
    height: 2em; 
    margin: 10px 0px; 
}

Chrome OSのクローム52で期待どおり

この印刷物が、クロム53でWindows上で7ホームとChrome 53では、表のヘッダーは2番目のページに2回印刷されます。一番上の余白なしに1回、上の余白に1回、その後に表の残りが1回印刷されます。以前のバージョンのChromeではWindowsで正常に印刷されていましたが、それがChromeの場合は分かりません（最後のバージョンでは間違いありません）。また、Firefoxでも期待どおりに印刷されます。

実際のthead要素の前に空の 'thead'要素を配置するという回避策が見つかりましたが、この解決策は非常にクルージングであり、私に不快感を与えます。

ブラウザ間で副作用が生じない可能性が高い、より堅牢な回避策がありますか？

出典

2016-09-15 jaydeedub

参考のためには、ここでは同じ[私はGoogle Chromeヘルプフォーラムに掲載の問題]（HTTPSです：//productforums.google.com/forum/#！msg/chrome/5r_7BoH7Ev4/6d8w17cgAgAJ）。 –

私の一時的な解決策：

thead { 
    display: table-row-group; 
}

出典

2016-09-19 05:16:39 liewzy

私の状況では、この解決法は問題を取り巻く最も現実的な方法です。私はかなりのページを修正する必要があるので、私はCSSに取り組むのではなく、それぞれに行き、「thead's to tr」を変更して、問題がChromeで修正されたときに再び変更しなければならない。 – jaydeedub

この回避策をどのように見つけたのか分かりませんが、とても感謝しています。私はサポートプリントが自己更新のブラウザのために私をかわすために戻って来るだろうと知っていた... –

私のコードの変更がこの問題を引き起こした何時間も私の頭を傷つけていた！ありがとう、トン！ – rakpan

Chromeのフィードバックチャンネルに同じ問題を投稿しました。私の回避策は、tbody内の標準テーブル行のthead要素を単に削除することでした。それは確かに意味的に純粋ではありませんが、あなたはCSSで触れるだけで簡単にスタイルを変えることができます。

表：

<table> 
<tbody> 
    <tr class="thead"> 
    <td></td> 
    <td></td> 
    </tr> 
    <tr> 
    <td></td> 
    <td></td> 
    </tr> 
</tbody> 
<tfoot> 
    <tr> 
    <td></td> 
    <td></td> 
    </tr> 
</tfoot> 
</table>

SCSS：

tr.thead { 
    td { 
    font-weight:bold; 
    border-bottom: solid 1px #333; 
    }  
}

出典

2016-09-15 21:32:12 jkelley

確かに2番目の 'thead'要素を追加するよりもきれいな解決策です。私の好みの解決策は、 'thead'要素を維持するでしょう。そのような解決策が出ていなければ、私はこれを使用します。 Chromeのフィードバックに関する投稿へのリンクを提供できますか？ – jaydeedub

2ページ目以降のChrome 53印刷テーブルヘッダーの回避策は2回ありますか？

答えて

関連する問題