테이블 1행과 1열 고정하고 싶을때
페이지 정보
작성자
운영자
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
댓글 0건
조회 935회
작성일 22-09-01 13:47
본문
첨부소스는 1행과 1열을 고정하는 소스이다.
마지막 행도 고정하고 </tbody> 아래 다음과 같이 소스를 추가하고
<tfoot>
<tr>
<th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th><th>G</th>
</tr>
</tfoot>
아래 스타일을 지정하면 마지막 행도 고정이 된다.
table#jb-table thead { position: sticky; top: 0; z-index: 1; }
table#jb-table th:first-child,
table#jb-table td:first-child { position: sticky; left: 0; }
table#jb-table tfoot { position: sticky; bottom: 0; }
제1열과 제2열을 고정하고 싶다면 다음과 같이 한다. 제2열의 left 값은 제1열의 크기에 맞게 적절히 정한다.
table#jb-table th:first-child,
table#jb-table td:first-child { position: sticky; left: 0; }
table#jb-table th:nth-child(2),
table#jb-table td:nth-child(2) { position: sticky; left: 183px; }
첨부파일
- 행열고정.html (27.4K) 11회 다운로드 | DATE : 2022-09-01 13:50:10
댓글목록
등록된 댓글이 없습니다.