table sticky
테이블 스티키(sticky) 기능이 있는 블로그 형식으로 글을 작성해보겠습니다. 테이블 스티키 기능은 페이지를 스크롤 할 때, 일정 영역의 컨텐츠를 항상 화면 상단에 고정하여 보여주는 기능입니다. 이를 활용하면, 특정 정보나 메뉴를 사용자가 쉽게 찾을 수 있도록 할 수 있습니다.
.tableFixHead {
overflow-y: auto;
height: 500px;
}
.tableFixHead thead th {
position: sticky;
top: 0px;
}
<div class="tableFixHead">
<table>
<thead>
<tr >
<th >title1</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
</tr>
</tbody>
</table>
</div>
부모 객체 중에 overflow: hidden 선언 되어있으면 작동 안함.
댓글 쓰기
0 댓글