CSSでtableの空のセルに斜線を引く

空のセルに斜線を引くためのCSS設定

/* 空のセルに斜線を引く 透明ー黒黒ー透明 */
table td:empty {
  background-image: linear-gradient(to top left,
  transparent, transparent 49%,
  #000 49%,
  #000 51%,
  transparent 51%, transparent);
}

空のセルに対して斜線を引きたい場合、table td:emptyセレクタとCSSのグラデーション機能（linear-gradient）を利用すると便利です。

まず、グラデーションは「透明 → 黒 → 黒 → 透明」という順序で設定します。これにより、ちょうど中間部分に黒いラインが引かれ、斜線のような効果を出せます。線の太さは、開始位置と終了位置のパーセンテージを調整することで変更可能です。例えば、「49%～51%」といった範囲に設定すると、細めの線になります。

ポイント：方向の指定

斜線の方向は、to top leftのように指定することで決まります。

• to top left：右下から左上に向かう斜線
• to top right：左下から右上に向かう斜線

この設定によって、正方形でなくても正確な斜線が引けるので、セルの形に影響されにくい方法です。他にも、グラデーションの角度を直接45度に設定する方法もありますが、この場合は正方形のセルでないと、期待通りの結果にならない場合があるため注意が必要です。

DEMO

See the Pen Untitled by yoshio (@creata-dsgni) on CodePen.