タイトル通り、Table要素のセルに斜線を引く方法についてです。
なお、私は <td> 要素に引きたかったので、そのように記述しました。
参考に…というかまるっとコードをコピーさせていただいた記事はこちらから。
【html/CSS】tableのマスに斜線を引く方法
https://csshtml.work/table-shasen/
コードは以下の通りです。
1 2 3 4 5 6 | <table> <tbody> <tr><th>見出し1</th><td>内容</td></tr> <tr><th>見出し2</th><td class="border"></td></tr> <tbody></table> |
1 2 3 | table td.border { background-image: linear-gradient(to right top, transparent calc(50% - 0.5px), #E4EFFF 50%, #E4EFFF calc(50% + 0.5px), transparent calc(50% + 1px));} |
上のようなテーブル要素を作成し、一番右下の <td> に斜線を引いています。
background: linear-gradient() はグラデーションを描くのに使うのですが、上記のような使い方をすると、ギザギザしない綺麗な斜線を描くことができるとのことでした。
私はまだ完全に理解出来てはいないので…詳しくは上の参考サイトをご参照ください。
以上、CSS で Table 要素のセルに斜線を引く方法についてでした。
ご参考になれば幸いです。
