CSS만 사용하여 고정 헤더 및 열 테이블을 만드는 방법은 무엇입니까?

순수 CSS를 사용하여 고정된 헤더와 열이 있는 테이블 만들기

헤더 수정:

JavaScript를 사용하지 않고 고정 헤더를 생성하려면 position:sticky 속성을 활용할 수 있습니다. 이 속성은 최신 버전의 Chrome, Firefox 및 Edge 브라우저에서 상단과 측면에 요소를 고정하는 것을 지원합니다.

첫 번째 열 수정:

첫 번째 열을 수정하려면 , 동일한 position: 끈적한 속성을 사용할 수 있지만 추가 left: 0 스타일을 사용하면 요소가 왼쪽에 달라붙도록 강제할 수 있습니다. table.

구현 예:

1. 컨테이너 내에서 스크롤을 가능하게 하는 오버플로: 스크롤 속성을 사용하여 컨테이너 내부에 테이블을 배치합니다.
2. 사용 위치: 끈끈함; 상단: 0; 머리글 행을 테이블 상단에 고정하려면 광고 요소에 스타일을 지정하세요.
3. 위치 추가: 고정; 왼쪽: 0; 첫 번째 열을 수정하려면 tbody th에 추가하세요.
4. 고정 헤더 행이 다른 모든 요소 위에 유지되도록 하려면 광고 th에 z-index: 1을 설정하세요.
5. 선택적으로 border-right를 추가하세요. 1px 솔리드 #CCC; 상자 그림자: 1px 0 0 0 #ccc; 고정 열의 테두리를 에뮬레이션하려면 tbody에 추가하세요.

참고: 이 설정이 제대로 작동하도록 하려면 최대 너비와 최대 높이를 컨테이너.

위 내용은 CSS만 사용하여 고정 헤더 및 열 테이블을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!