テーブルの空セルに斜線を引く方法を紹介します。
まずはテーブルを作成します。
index.html
<table><tr><th></th><th>タイトル1</th><th>タイトル2</th><th>タイトル3</th></tr><tr><td>1</td><td></td><td></td><td></td></tr><tr><td>2</td><td></td><td></td><td></td></tr><tr><td>3</td><td></td><td></td><td></td></tr></table>
style.css
/* table */table{border-collapse:collapse;margin:20px;}tableth,tabletd{width:50px;height:50px;text-align:center;border:1pxsolidblack;}
このようなテーブルが作成されます。
それでは、この空のセルに斜線を書いてみましょう。
右上がりの斜線
右上がりの斜線の書き方です。
斜線を入れたいセルにクラスを追加してください
index.html
<tr><thclass="right_up_border"></th><!-- 斜線を入れたいセルにクラスを追加する --><th>タイトル1</th><th>タイトル2</th><th>タイトル3</th></tr>
そしたらCSSを書いていきます。
style.css
/* 右上がりの斜線 */.right_up_border{background-image:linear-gradient(-45deg,/*角度*/transparent49%,black49%,/*斜線の色*/black51%,/*斜線の色*/transparent51%,transparent);}
右下がりの斜線
次は右下がりの斜線です。これもやり方は同じです
index.html
<tr><thclass="right_up_border"></th><!-- 斜線を入れたいセルにクラスを追加する --><th>タイトル1</th><th>タイトル2</th><th>タイトル3</th></tr>
style.css
/* 右上がりの斜線 */.right_up_border{background-image:linear-gradient(45deg,/*角度*/transparent49%,black49%,/*斜線の色*/black51%,/*斜線の色*/transparent51%,transparent);}
角度の求め方はこちらを参照してください。
まとめ
こんな感じでテーブルの空セルに斜線を引くことができました。
でも多分他にもやり方はあると思うので、アドバイス有りましたらよろしくお願いします。