Q&Aこんにちは。
テーブル(html)をwebkitで印刷・pdf変換（webkitエンジンのwkhtmltopdfを使用）するところ、
２ページからヘッダーのカラム名と内容が重なる問題があります。
・正常の場合
・カラム名と内容の文字が重なる
次はhtmlコードです。
html
1<!DOCTYPE html> 2<html> 3<head> 4 <style type="text/css"> 5 table { border-collapse: collapse; } 6 thead { display: table-header-group; } 7 tr { page-break-inside: avoid; } 8 td { border: 1px solid black; vertical-align: top; } 9 </style> 10</head> 11<body> 12 <table> 13 <thead> 14 <tr> 15 <td>カラム 1</td> 16 <td>カラム 2</td> 17 </tr> 18 </thead> 19 <tr> 20 <td>1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ</td> 21 <td>1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ 1234567890 ABCDEF GHIJKL MNOPQ RSTUV WXYZ</td> 22 </tr> 23 </table> 24</body> 25</html>
githubの開発ページでは
tr { page-break-inside: avoid; } を追加することで
該当の現象が直ると言っています。
ですが、tr { page-break-inside: avoid; }が効かないです。
githubのフォーラムページ
https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1524
何が問題でしょうか。
よろしくお願いいたします。
回答1件
0
自己解決
tr { page-break-inside: avoid; }が効かない原因が分かりました。
html
1<tr> 2 <td>長い文字列長い文字列長い文字列長い文字列長い文字列…</td> 3</tr>
tr { page-break-inside: avoid; }は
td単位で効くらしく、これを解決するには構造を変えて
コントローラー側で文字数をチェックしtdを分ける必要がありそうです。
詳しい対応方法はまだやってませんので、実装したら更新いたします。
投稿2015/10/16 08:52
総合スコア33
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。