CSS만 사용하여 고정 헤더와 고정 첫 번째 열이 있는 테이블을 어떻게 만들 수 있나요?

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

JavaScript 없이 고정 헤더와 고정 첫 번째 열이 있는 테이블을 생성하면 다음과 같은 문제가 발생합니다. 모바일 브라우저. 이 기사에서는 이 기능을 효과적으로 구현하는 순수한 CSS 기반 솔루션을 살펴봅니다.

CSS 고정 위치 지정을 사용한 솔루션:

최신 웹 브라우저는 position: 고정 속성을 지원합니다. 요소가 포함 블록의 특정 가장자리에 수평(왼쪽/오른쪽) 또는 수직(상단/하단)으로 고정될 수 있습니다. 이 속성을 활용하면 고정된 테이블 헤더와 고정된 첫 번째 열을 얻을 수 있습니다.

구현 단계:

1. 컨테이너 생성: 스크롤을 처리할 컨테이너 요소 안에 테이블을 배치하세요.
2. 스크롤 활성화 컨테이너에서: 오버플로 지정: 수평/수직 스크롤을 활성화하려면 컨테이너에서 스크롤합니다.
3. 머리글 및 첫 번째 열 셀 고정: 테이블 머리글(제일)에 고정 위치 지정을 사용합니다. 상단에 붙이고 첫 번째 열 셀(tbody th)을 왼쪽에 붙입니다.
4. 수정 왼쪽 열의 헤더: 첫 번째 열의 헤더 셀이 고정된 상태로 유지되도록 하려면 광고 th:first-child에서 left: 0 및 z-index: 2를 설정하세요. Z-색인은 헤더 셀이 tbody 번째 스타일의 에뮬레이션된 테두리 위에 유지되도록 하는 데 사용됩니다.
5. 첫 번째 열의 테두리 에뮬레이트: 브라우저는 끈적한 요소에 테두리를 삭제하는 경향이 있습니다. 이 문제를 해결하기 위해 우리는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!