テーブルの枠内に斜線を引く

テーブルのthもしくはtdで空白がある場合、装飾としては背景色変更だけでなく、斜線も引きたい場合、CSS3のグラデーションを利用する。

しかし、角度が必要となってくるため、その角度はJavascriptが用意しているプロパティやメソッドを利用して割り出す。

2点間（X/Y）の数値を利用するため、横幅と縦幅の数字を割り出せば利用可能。

<scrpit>
$(function(){
	var x = $(".row .empty").innerWidth();
	var y = $(".row .empty").innerHeight();
	var kaku = Math.atan2(y, x) * 180 / Math.PI;
	$(".row .empty").css("background-image", "linear-gradient(-"+kaku+"deg, transparent 49%, black 50%, black 50%, transparent 50%, transparent)");
})
</script>
<table>
	<tr class="row">
		<th class="empty"></th><th>生産地</th><th>値段</th>
	</tr>
	<tr>
		<th>バナナ</th><td>フィリピン</td><td>200円</td>
	</tr>
	<tr>
		<th>りんご</th><td>長野県</td><td>150円</td>
	</tr>
</table>