css 이용하여 table 틀고정하는 방법

테이블의 내용이 많아보면 타이틀 내용이 보이지 않아 불편한 경우가 있습니다.

이럴때 첫번째 행이나 열을 고정하면 보기에 편합니다.

 

css로 position: sticky를 이용하면 테이블을 고정할 수 있습니다.

좌측 첫번째 칸이 고정이므로 위치를 left: 0 을 꼭 넣어줍니다.

(td와 th의 첫번째 이므로 first-child에다가 고정 css 내용을 넣어줍니다.)

아래 코드를 통해  확인하실 수 있어요.

 

See the Pen table 좌측 부분 고정하기 by woosohee (@venusy) on CodePen.

 

내용