반응형
테이블의 내용이 많아보면 타이틀 내용이 보이지 않아 불편한 경우가 있습니다.
이럴때 첫번째 행이나 열을 고정하면 보기에 편합니다.
css로 position: sticky를 이용하면 테이블을 고정할 수 있습니다.
좌측 첫번째 칸이 고정이므로 위치를 left: 0 을 꼭 넣어줍니다.
(td와 th의 첫번째 이므로 first-child에다가 고정 css 내용을 넣어줍니다.)
아래 코드를 통해 확인하실 수 있어요.
내용
반응형
'Web > CSS' 카테고리의 다른 글
| input search x버튼 표시 없애기 (0) | 2023.04.14 |
|---|---|
| css 셀렉터 - 특성 선택자 [class *='text-'] 클래스 모두 선택하기 (0) | 2023.02.27 |
| CSS Scroll Snap(스크롤스냅)으로 이미지 slider 만들기 (0) | 2023.01.17 |
| css 이미지 비율(종횡비) 고정하는 방법 aspect-ratio 사용 (0) | 2023.01.16 |
| 무료 상업 폰트 프리텐다드(Pretendard) 웹에서 사용하기 (0) | 2023.01.12 |
댓글