이전에 작성한 글 중에 css의 position: sticky를 이용하여 테이블의 헤더를 간단하게 고정하는 방법을 올린적이 있었다.
2020/05/18 - [Web-Front/HTML] - [HTML]테이블 헤더 고정하는 방법
[HTML]테이블 헤더 고정하는 방법
position: sticky를 활용해서 테이블의 헤더를 고정시키는 방법입니다. 이 방법이 좋은이유는 테이블이 가로스크롤에 대해서는 자연스럽게 스크롤되면서 세로스크롤에서는 헤더가 고정이 됩니다.
usang0810.tistory.com
쉽지만 유용한 방법이라 괜찮았었는데 댓글중에 헤더에서 rowspan을 사용했을 때 문제가 발생하는 것 같아서 확인해 보았다.
실제로 테스트해보니 첫번째 헤더위에 두번재 헤더가 올라가면서 의도치 않은 문제가 발생한다.
해결방법을 찾는과정에서 sticky는 유지하면서 사용하고, javascript의 개입을 최소화 시키면서 적용시키고 싶었다.
다음의 블로그에서 해결방법을 찾을 수 있었다.
velog.io/@drawyourmind/table-thead-%EA%B3%A0%EC%A0%95%EA%B3%BC-tbody-%EC%8A%A4%ED%81%AC%EB%A1%A4
table thead 고정과 tbody 스크롤
image HR시스템이 유난히 테이블과의 싸움이다. 그중 하나가 헤더 고정 이슈인데 이 한개가 아니고 colspan, rowspan으로 셀이 합쳐지면서 헤더가 고정되는 부분들이 있다보니 은근히 노가다 이슈
velog.io
해결방법을 보면 sticky를 적용시키는 헤더의 높이만큼 top에 크기를 주어서 해결한다.
#userListTable th,
#userListTable td {
width: 20%;
height: 23px;
border-right: 1px solid lightgray;
}
.sticky-head-one {
position: sticky;
top: 0px;
}
.sticky-head-two {
position: sticky;
top: 23px;
}
rowspan이나 colspan이나 적용이 잘 되고 header가 몇줄이 되든 높이값만큼 top의 크기를 늘려가면 잘 적용이 된다.
전체 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
* {
box-sizing: border-box;
}
.tableWrapper {
width: 400px;
height: 300px;
background-color: lightgreen;
overflow: auto;
}
#userListTable {
width: 500px;
border: 0px;
border-collapse: collapse;
position: relative;
}
#userListTable th,
#userListTable td {
width: 20%;
height: 23px;
border-right: 1px solid lightgray;
}
#userListTable th:last-child,
#userListTable td:last-child {
border-right: 0px !important;
}
#userListTable tr:nth-child(odd) {
background-color: blanchedalmond;
}
#userListTable thead th {
background-color: gray !important;
}
.sticky-head-one {
position: sticky;
top: 0px;
}
.sticky-head-two {
position: sticky;
top: 23px;
}
</style>
</head>
<body>
<div class="tableWrapper">
<table id="userListTable">
<thead>
<tr>
<th rowspan="2" class="sticky-head-one">1번헤더</th>
<th colspan="2" class="sticky-head-one">2,3번헤더</th>
<th rowspan="2" colspan="2" class="sticky-head-one">4,5번헤더</th>
</tr>
<tr>
<th class="sticky-head-two">2서브헤더</th>
<th class="sticky-head-two">3서브헤더</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
'Web-Front > HTML' 카테고리의 다른 글
| [HTML]테이블 헤더 고정하는 방법 (8) | 2020.05.18 |
|---|---|
| VSCode HTML 자동완성 만들기(사용자 코드 조각 추가) (0) | 2020.05.11 |
