空のセルに対して、斜線を引く

例えば下記のような表を作った。
営業日:月、火
お休み:水曜日
っていう感じで、
水曜日のセルに斜線を入れたい時。
（初心者のため表のイメージの貼り付けができなくてごめんなさいね）

一番下の水曜日のセルには何も書かない。
空にしておく。

index.html

<table border="1">
            <tr>
              <th>診療時間</th>
              <td>月</td>
              <td>火</td>
              <td>水</td>
            </tr>
            <tr>
              <th>9:00~15:00</th>
              <td>●</td>
              <td>●</td>
              <td></td>
            </tr>
          </table>

CSSで空のセルに対して。

style.css

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

解説

・table td:empty：空のセルに対して。
・グラデーションlinear-gradientを利用します。
グラデーションの仕組みは、なんとなくの理解だけど、
「透明〜黒〜黒〜透明の順番でグラデーションしろ。」ってイメージでいいかと。
→→ちょうど中間で黒い線が引かれる。＝斜線　
線の太さは％を変更すれば良い。（ちなみにこれは最小）
47%〜53%とかいい感じじゃないかな。

★この時に、to top left,て指定しているのがポイント。
「（右下から）左上に向かってグラデーション」となるので、右上りの斜線になる。

逆に右下がりの斜線ならrightに変更すれば良い。

他のやり方だと４５度傾けたりする方法もあるけど、正方形のセルに対してじゃないとうまくいかないよう。。これならどんな形でもバッチリ斜めの線になる。はず。

参考リンク

CSSで斜線を引く方法