6

私は最近、サポートされているブラウザー<thead>が各ページの上部にブロックを印刷する CSS コードを発見しました ( display: table-header-group;inを使用@media print {})。これにより、テーブルを印刷するアプリケーションのコードが大幅に簡素化されます。

しかし、私のクライアントはスタイルに関して非常にうるさいです。再印刷されたヘッダー グループには、元のヘッダーのスタイルの一部が欠けているようです。つまりborder-bottom-style、border-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;これらのヘッダー グループのスタイル設定に関しては、多くの質問がありました。

4

2 に答える 2

4

ヘッダー行のセルに境界線を設定すると、Firefox 14 で問題なく動作するようです:

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

Firefox では実際には必要ありませんがdisplay: table-header-group、他のブラウザーでは必要になる場合があります。質問CSS: 印刷モードでテーブル ヘッダーを繰り返すを参照してください。

于 2012-08-08T03:54:02.623 に答える