HTML table 대각선 그리기

Jmnote bot (토론 | 기여)님의 2021년 6월 4일 (금) 21:00 판 (봇: 자동으로 텍스트 교체 (-<source +<syntaxhighlight , -</source> +</syntaxhighlight>))
(차이) ← 이전 판 | 최신판 (차이) | 다음 판 → (차이)

1 개요[ | ]

HTML 테이블 대각선 그리기
HTML table 대각선 넣기
CSS table 대각선 넣기
<line x1="0" y1="0" x2="100%" y2="100%" stroke="gray" />
<line x1="0" y1="0" x2="100%" y2="100%" stroke="black" stroke-width=".5" />

2 예제 1[ | ]

<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에 넣으면 된다.
<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 같이 보기[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}