1 개요[ | ]
- HTML 테이블 대각선 그리기
- HTML table 대각선 넣기
- CSS table 대각선 넣기
- SVG line 태그 활용
html
Copy
<line x1="0" y1="0" x2="100%" y2="100%" stroke="gray" />
html
Copy
<line x1="0" y1="0" x2="100%" y2="100%" stroke="black" stroke-width=".5" />
2 예제 1[ | ]
html
Copy
<style>
.slash {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="100%" x2="100%" y2="0" stroke="gray" /></svg>');
}
.backslash {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="100%" y2="100%" stroke="gray" /></svg>');
}
table {
border-collapse: collapse;
border-top: 1px solid gray;
border-left: 1px solid gray;
}
th, td {
border-bottom: 1px solid gray;
border-right: 1px solid gray;
padding: 5px;
}
</style>
<table>
<tr><th class="backslash"></th><th>점수</th></tr>
<tr><td>한놈</td><td>10</td></tr>
<tr><td class="slash">두시기</td><td>20</td></tr>
<tr><td>석삼</td><td class="slash"></td></tr>
</table>
3 예제 2: 시간표[ | ]
- 대각선이 있는 칸에 글자를 넣은 예제
- 대각선이 있는 칸은 기본 왼쪽 정렬이고, 오른쪽 정렬할 내용은 div에 넣으면 된다.
html
Copy
<style>
.slash {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="100%" x2="100%" y2="0" stroke="gray" /></svg>');
}
.backslash {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="0" x2="100%" y2="100%" stroke="gray" /></svg>');
}
.slash, .backslash { text-align: left; }
.slash div, .backslash div { text-align: right; }
table {
border-collapse: collapse;
border: 1px solid gray;
}
th, td {
border: 1px solid gray;
padding: 5px;
text-align: center;
}
</style>
<table>
<tr>
<th class='backslash' style='width:60px'><div>요일</div>교시</th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
</tr>
<tr>
<td>1</td>
<td>국어</td>
<td>영어</td>
<td>수학</td>
<td>미술</td>
</tr>
<tr>
<td>2</td>
<td>사회</td>
<td>체육</td>
<td>국사</td>
<td class='slash'>H<div>R</div></td>
</tr>
</table>
4 같이 보기[ | ]
편집자 Jmnote Jmnote bot
로그인하시면 댓글을 쓸 수 있습니다.