2012-08-07 14 views
5

最近、サポートされているブラウザのCSSコードで、<thead>ブロックが各ページの上部に表示されています(display: table-header-group;@media print {})。これにより、アプリケーションでテーブルを印刷するコードが大幅に簡略化されます。各ページにスタイリングヘッダーが印刷されています

しかし、私のクライアントはスタイルについて非常に気難しいです。再印刷されたヘッダーグループには元のヘッダーのスタイルの一部がありません。つまり、border-bottom-styleborder-bottom-widthは、ヘッダーをテーブル本体から区切ります。これは難しい要件だと思われるので、これらのスタイルをこれらのヘッダーグループに含めることができるようにしたいと思います。

私はこの条件を満たすためにこれらのスタイルを印刷するようにFirefoxを強制しようと試みましたが、これらの方法では望みの結果が得られないようです。私が試したいくつかの例:

@media print { 
    thead { 
     display: table-header-group; 
     border-bottom-style: solid; 
     border-bottom-width: 3px; 
    } 
} 

<thead style="border-bottom-style: solid; border-bottom-width: 3px;"></thead> 

table.class thead { 
    border-bottom-style: solid; 
    border-bottom-width: 3px; 
} 

table.class th { 
    border-bottom-style: solid; 
    border-bottom-width: 3px; 
} 

私の質問を、そして:設定する方法がありますこれらの再印刷されたヘッダーグループのスタイル?または、ブラウザはちょうどスパータンのデフォルトの表ヘッダースタイル(太字のテキスト)を使用していますか?

この質問に既に回答して回答があった場合は、私を許してください。私は周りを検索したが、この特定の問題については何も見つけることができなかった。 display: table-header-group;には多くの質問がありましたが、ヘッダーグループのスタイリングに関しては何もありませんでした。ヘッダー行のセルに境界線を設定する

+0

正しく印刷されないものの完全な例をアップロードできますか? – Jason

+0

以下のコメントで指摘したように、この問題はテーブル上のもう1つの相反するスタイル(具体的には、「境界崩壊:崩壊」)でした。私はちょうど 'cellspacing =" 0 "'を使用して切り替えて、問題は解決しました。 – Chris

答えて

3

は、Firefox 14で[OK]を動作するようです:

@media print { 
    thead { 
     display: table-header-group; 
    } 
    thead th { 
     border-bottom-style: solid; 
     border-bottom-width: 3px; 
    } 
} 

は、Firefoxは本当にdisplay: table-header-group事を必要としませんが、他のブラウザでは、質問CSS: Repeat table headers in print modeを参照して、必要な場合があります。

+0

ありがとう!私はそのスタイリングと矛盾していた他のCSSをいくつか持っていたと思う。私は 'border-collapse:collapse'を使うようにテーブルを設定していました。これは何らかの理由で、最初のヘッダグループのために下の境界線が印刷され、それ以降のものは印刷されませんでした。私は '

'タグの 'cellspacing =" 0 "'を使うように変更しました。 – Chris

関連する問題