@media printで罫線を印刷させない方法

質問

@media printで罫線を印刷させない方法について助言いただけませんか。

文字を印刷させないのはわかるのですが・・。

＃画面では罫線表示（テーブルの線）されているが、印刷するときにテーブルの文字は残して、線だけ消したい。

回答No.1

Adams2001 · ベストアンサー

罫線もスタイルシートで与えてしまえばいいのです。

table {border:1px solid #000000;border-collapse:collapse}
th,td {border:1px solid #000000}

@media print{
table {border-style:none}
th,td {border-style:none}
}

上で全ての（視覚系）媒体において、表（TABLE要素）とヘッダ用セル（TH要素）とデータ用セル（TD要素）に枠線（罫線）を与えます。ついでに枠線を重ね合わせるようにしています（結合ボーダーモデル、border-collapse:collapse）。

下では@medeiaで印刷媒体を指定しますので、印刷する場合のみこのスタイルが適用されます。さらにこの記述が後にありますので、前に指定した重複するスタイルはこちらの指定に置き換わります。

で、枠線の形式を"なし"（border-style:none）と指定しておけば枠線は印刷されません。

分離ボーダーモデル（border-collapse:separate）にして枠線の線種などのスタイルを変えると色々な体裁の表が作れますので、好みにあわせて変えてみてください。