【CSS】tableタグの空セルに斜線（対角線）を引く方法

RELEASE / 2024.7.4 UPDATE / 2024.07.03

:emtry

css

HTML

対角線

斜線

<table>タグはWebサイトで表を作るために使用する専用タグです。
セルの中には空のセルが出来ることもあります。
そんな時、空のセルだということを分かりやすくするために色を付けたり斜線を引いたりすることがよくありますね。
この記事では空のセルに色を付けたり斜線（対角線）を引いたりする方法をご紹介したいと思います。

この記事の目次を表示

1 空のタグを選択する方法
- 1.1 空のセルに斜線（対角線）を引く方法
2 まとめ

空のタグを選択する方法

空のセルは:emptyという疑似セレクタを使用することで選択出来ます。
具体的には以下のように指定します。

th:empty,
td:empty{
    background: #eee;
}

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

空のセルだけを選択して背景色を付けることが出来ます。

空のセルに斜線（対角線）を引く方法

空のタグに斜線（対角線）を引くにはCSSで以下のように指定することで表現することが出来ます。

右肩下がりの場合

右肩下がりの場合はこちら。

th:emtpy,
td:emtpy{
    background-image: linear-gradient(to left bottom, transparent calc(50% - 1px), #000 calc(50% - .5px), #000 calc(50% + .5px), transparent calc(50% + 1px), #fff);
    background-repeat: no-repeat;
}

linear-gradient(to left bottom, ...)と指定します。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

右肩上がりの場合

右肩上がりの場合はこちら。

table td:empty{
    background-image: linear-gradient(to right bottom, transparent calc(50% - 1px), #000 calc(50% - .5px), #000 calc(50% + .5px), transparent calc(50% + 1px), #fff);
    background-repeat: no-repeat;
}

linear-gradient(to right bottom, ...)と指定します。

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

いかがでしたか？
空のセルを指定する方法と空のタグに斜線（対角線）を引く方法をご紹介しました。
疑似セレクタ:emtryを使うことで簡単に指定することが出来ます。
ただし、斜線（対角線）をHTMLとCSSだけで引くのは意外と難しく、角度によってはジャギーが出現してしまいます。
もっと綺麗に引ける方法が見つかった際はご紹介したいと思います。
ひとまずセルに限らずHTMLとCSSで斜線（対角線）を引くにはこの方法が最適だと思います。