サイズが可変のtableのセルに斜線を引くCSS

SVGを活用すると、可変になっている矩形の端から端にスタイルシートでナナメの線を引くことができます。

リキッドの<table>対戦表でセルに斜線を引く場合などでいかがでしょうか。

See the Pen stretch slash css by webdev (@webdev-jp-net) on CodePen.0

パソコンのブラウザの場合は、ウィンドウ幅を変更して
スマートフォンの場合は画面を回転させて、テーブルのサイズを変更してみてください。

SVGなので滲まない

ざっくりいうと、この方法は
斜線が描かれたSVGをCSSのbackgtound-imageで矩形のサイズいっぱいに表示しています。

SVGはシンプルで、
viewBox="0 0 10 10"は、幅10 高さ10の表示枠を設定しており
x1="0" y1="0"は、始点で左上
x2="10" y2="10"は、終点で右下です。

<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
	<line fill="none" stroke="#000000" stroke-width="0.2" stroke-miterlimit="10" x1="0" y1="0" x2="10" y2="10"/>
</svg>

反対方向のナナメにしたい場合は
x1="10" y1="0"は、始点で左上
x2="0" y2="10"は、終点で右下です。

また、重ねるだけでバツ印も作られます。

<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
	<line fill="none" stroke="#000000" stroke-width="0.2" stroke-miterlimit="10" x1="0" y1="0" x2="10" y2="10"/>
	<line fill="none" stroke="#000000" stroke-width="0.2" stroke-miterlimit="10" x1="10" y1="0" x2="0" y2="10"/>
</svg>

線の太さはstroke-width="0.2"の値を調節すると、太くしたり細くしたりできます。

SVGはデフォルトでは縦横比固定になっている

SVGを普通に作って、サイズを調整して矩形にフィットさせても線は45度の傾きのまま固定されてしまいます。

このやり方のポイントは、SVGタグにpreserveAspectRatio="none"を指定し
縦横比の固定を解除しているところです。

IE対応はutf8エンコードかIMGファイル化で対応

サンプルソースではdata:image/svg+xml,の書式でSVGを直接記述し一元管理していますが
この書式はInternetExplorerとedgeでは使えません。

td:empty {
	background: url('data:image/svg+xml,<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><line fill="none" stroke="#000000" stroke-width="0.2" stroke-miterlimit="10" x1="10" y1="0" x2="0" y2="10"/></svg>') no-repeat;
	background-size: 100%;
}

IEでも、data:image/svg+xml;charset=utf8,の書式を使い、utf8エンコードすればCSSにSVGを記述できるので
この方法を使うか
SVGコードを.svgの拡張子で保存しimgファイルとして呼び出すようにすれば対応させられます。
SVGコード部分は、utf8のエンコーダで変換してから貼り付けています。

td:empty {
	background: url('data:image/svg+xml;charset=utf8,%3csvg%20preserveAspectRatio%3d%22none%22%20xmlns%3d%22http%3a%2f%2fwww%2ew3%2eorg%2f2000%2fsvg%22%20viewBox%3d%220%200%2010%2010%22%3e%3cline%20fill%3d%22none%22%20stroke%3d%22%23000000%22%20stroke%2dwidth%3d%220%2e2%22%20stroke%2dmiterlimit%3d%2210%22%20x1%3d%2210%22%20y1%3d%220%22%20x2%3d%220%22%20y2%3d%2210%22%2f%3e%3c%2fsvg%3e') no-repeat;
	background-size: 100%;
}

関連記事