空のセルに対して、斜線を引く
例えば下記のような表を作った。
営業日:月、火
お休み:水曜日
っていう感じで、
水曜日のセルに斜線を入れたい時。
（初心者のため表のイメージの貼り付けができなくてごめんなさいね）
一番下の水曜日のセルには何も書かない。
空にしておく。
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に変更すれば良い。
他のやり方だと４５度傾けたりする方法もあるけど、正方形のセルに対してじゃないとうまくいかないよう。。これならどんな形でもバッチリ斜めの線になる。はず。