HTML table 대각선 그리기

1 개요

HTML table 대각선 넣기
CSS table 대각선 넣기

예제: http://jmnote.com/html5/diagonal-line-in-table.php

2 소스 코드

<style type="text/css">
.slash {
    background:url(slash.png);
    background-size:100% 100%;
}
.backslash {
    position: relative;
}
.backslash:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
    background:url(slash.png);
    background-size: 100% 100%;
    -webkit-transform:scaleX(-1);
    -moz-transform:scaleX(-1);
    -ms-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
}
table {
	border-collapse:collapse;
	border-top:1px solid #ccc;
	border-left:1px solid #ccc;
}  
th, td {
	border-bottom:1px solid #ccc;
	border-right:1px solid #ccc;
	padding: 5px;
}
</style>

<table>
<tr>
	<th class="backslash"></th>
	<th>점수</th>
</tr>
<tr>
	<td>한놈</td>
	<td>10</td>
</tr>
<tr>
	<td>두시기</td>
	<td>20</td>
</tr>
<tr>
	<td>석삼</td>
	<td class="slash"></td>
</tr>
</table>

3 같이 보기