0

動的に入力されるテーブルを含む Web ページがあります。このページは、記録のために印刷する必要があります。私が抱えている問題は、tr 内で改ページを回避することです。私は何時間もかけてグーグルで検索し、多くのことを試しましたが、作成できたのは正しい場所で壊れていないページだけで、一部のデータが欠落しています. 小さなシンプルな印刷CSSページがあります

.noprint{
display: none;
}
.printthis { 
display: block; 
} 
.data table{ 
page-break-inside:avoid;
}
.data tr{
page-break-inside:avoid;
}
.data thead{
display:table-header-group;
}
.data tbody{
display:table-body-group;
page-break-inside:avoid;
}
.data,
.data th,
.data td {
border:1px solid #000;
border-spacing:0;   
border-collapse:collapse; 
}
.data table,th, tbody, tr, td {
background-color:transparent;
padding: 0px;
margin: 0px;
}
a:link:after, #content a:visited:after {
content: " (" attr(href) ") ";
text-decoration: none;
font-size: 90%;
display: none;
}
a[href^="/"]:after {
text-decoration: none;
display: none;
}

私が行ったこの表の結果を印刷しようとしているだけですが、正しい場所でそれを壊すには少し助けが必要です. どんなヘルプでも大歓迎です

4

2 に答える 2

1

すべてのブラウザで行が分割されていますか？

私は同様の問題を抱えていました：

tr {page-break-inside:avoid;}

私のために働いたが、あなたはすでにこれを持っているようだ。
cssルールが行をカバーしていない可能性があります。選択したブラウザの開発者ツールバーを使用して、テーブル行に適用されているcssルールを調べてみてください。

各ページの上部にテーブルヘッダーを印刷することに関しては、IEが現時点でこれをサポートしている唯一のブラウザのようです。
Webキットベースのブラウザは現時点ではサポートしていません：
バグ17205-THEAD＆TFOOTはすべてのページに印刷する必要があります

于 2012-10-17T12:22:36.940 に答える
1

追加の属性を持つ css を挿入してみてください

media=print

<link type="stylesheet" href="../css path" media="print">

オプションを使用している間

window.print()

この css のみが有効になり、印刷ページにこの css が適用されます

于 2012-10-06T16:25:43.737 に答える