CSS만 사용하여 고정 헤더와 고정 첫 번째 열이 있는 테이블을 어떻게 만들 수 있나요?
Jan 01, 2025 am 08:52 AM순수 CSS를 사용하여 고정 헤더와 고정 열이 있는 테이블
JavaScript 없이 고정 헤더와 고정 첫 번째 열이 있는 테이블을 생성하면 다음과 같은 문제가 발생합니다. 모바일 브라우저. 이 기사에서는 이 기능을 효과적으로 구현하는 순수한 CSS 기반 솔루션을 살펴봅니다.
CSS 고정 위치 지정을 사용한 솔루션:
최신 웹 브라우저는 position: 고정 속성을 지원합니다. 요소가 포함 블록의 특정 가장자리에 수평(왼쪽/오른쪽) 또는 수직(상단/하단)으로 고정될 수 있습니다. 이 속성을 활용하면 고정된 테이블 헤더와 고정된 첫 번째 열을 얻을 수 있습니다.
구현 단계:
- 컨테이너 생성: 스크롤을 처리할 컨테이너 요소 안에 테이블을 배치하세요.
- 스크롤 활성화 컨테이너에서: 오버플로 지정: 수평/수직 스크롤을 활성화하려면 컨테이너에서 스크롤합니다.
- 머리글 및 첫 번째 열 셀 고정: 테이블 머리글(제일)에 고정 위치 지정을 사용합니다. 상단에 붙이고 첫 번째 열 셀(tbody th)을 왼쪽에 붙입니다.
- 수정 왼쪽 열의 헤더: 첫 번째 열의 헤더 셀이 고정된 상태로 유지되도록 하려면 광고 th:first-child에서 left: 0 및 z-index: 2를 설정하세요. Z-색인은 헤더 셀이 tbody 번째 스타일의 에뮬레이션된 테두리 위에 유지되도록 하는 데 사용됩니다.
- 첫 번째 열의 테두리 에뮬레이트: 브라우저는 끈적한 요소에 테두리를 삭제하는 경향이 있습니다. 이 문제를 해결하기 위해 우리는 tbody의 box-shadow를 사용하여 border-right를 에뮬레이트합니다.
CSS 코드:
/* Enable scrolling on container */ div.container { max-width: 400px; max-height: 150px; overflow: scroll; } /* Stick header cells to top */ thead th { position: sticky; top: 0; } /* Stick first column cells to left */ tbody th { position: sticky; left: 0; } /* Stick first column header cell on the left */ thead th:first-child { left: 0; z-index: 2; } /* Emulate border for first column */ tbody th { border-right: 1px solid #CCC; box-shadow: 1px 0 0 0 #ccc; }
결론 :
스크롤링 컨테이너와 고정 위치 지정을 결합하여 다음을 만들 수 있습니다. JavaScript에 의존하지 않고 고정된 테이블 헤더와 고정된 첫 번째 열. 이 솔루션은 최신 브라우저에서 널리 지원되며 데스크톱과 모바일 장치 모두에서 부드러운 스크롤 환경을 제공합니다.
위 내용은 CSS만 사용하여 고정 헤더와 고정 첫 번째 열이 있는 테이블을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

인기 기사

인기 기사

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











Smart Forms 프레임 워크로 JavaScript 연락처 양식 작성

5 개의 최고의 PHP 양식 빌더 (및 3 개의 무료 스크립트) 비교

Codecanyon 2025에 대한 최고의 CSS 애니메이션 및 효과 (무료)
