웹프로그래밍

Global It Leader!!


CSS


 
 

테이블 1행과 1열 고정하고 싶을때

페이지 정보

작성자 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 조회 851회 작성일 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; }

첨부파일

댓글목록

등록된 댓글이 없습니다.

전체 72
게시물 검색
CSS 목록
번호 제목 글쓴이 조회 날짜
72 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 332 07-31
71 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 525 04-09
열람중 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 852 09-01
69 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1642 04-24
68 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2791 04-24
67 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1184 03-28
66 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2505 03-26
65 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1182 03-26
64 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1187 03-25
63 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1219 03-18
62 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 7597 11-28
61 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1639 09-20
60 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 1803 08-23
59 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2084 06-07
58 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2530 05-20
57 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2346 04-08
56 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2755 02-03
55 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2335 12-19
54 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2465 11-02
53 no_profile 운영자 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2537 10-25