html - 印刷用に CSS を使用して HTML テーブルをフォーマットする方法は?

Question

出席シートを表示するために CSS を使用してテーブルをフォーマットしたいと考えています。表を印刷できるように CSS スタイルを表に追加するにはどうすればよいですか?

Answer 1

スタイルシート内で、次を使用します

@media print {
  /* put your CSS rules if they are to apply in print only */
}

例えば、

@media print {
   * { color: black; background: white; }
   table { font-size: 80%; }
}

詳細は、特定のテーブルを印刷する際に予想される問題の種類によって異なります。一般に、固定の列幅 (ピクセル単位など) を設定している場合は、おそらくデザインのこの部分を再検討する必要があります。重要な情報を伝えるために色を使用している場合 (例: 赤のセルは不在を表し、緑のセルは存在を表す)、この決定を再考する必要があります。

Answer 2

以下のcssを使用

table, th, td
{
  border-collapse:collapse;
  border: 1px solid black;
  width:100%;
  text-align:right;
}

また、印刷固有のレイアウトに media="print" を使用することもできます

Answer 3

@media ルールを使用して、メディア固有の CSS スタイルをページに追加できます

たとえば、@media screenはコンピュータ画面用のスタイルを@media print使用し、プリンタ用に使用されます。

を使用@media allすると、スタイルがすべてのメディア タイプのデバイスに確実に適用されます。

メディア タイプの詳細については、リンクをたどってください

Answer 4

CSS スタイルシートの属性を使用media="print"して、印刷固有のレイアウトを作成します。

Answer 5

すべての良い答えを修正してください。

私がすることは、印刷専用の特定の css ファイルを作成し、それをページに添付することです。

<link href='/css/theme-print.css' rel='stylesheet' media="print" type='text/css' />

Answer 6

使用することもできます

body {
-webkit-print-color-adjust:exact;
}