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

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

소개:

고정 헤더와 고정 열이 있는 테이블 만들기 고정된 첫 번째 열은 눈에 보이는 뷰포트 너머로 확장되는 대규모 데이터세트나 테이블을 볼 수 있는 안정적이고 효율적인 사용자 환경을 제공할 수 있습니다. 전통적으로 JavaScript나 jQuery가 이러한 목적으로 사용되었습니다. 그러나 이로 인해 모바일 브라우저에서는 성능 문제가 발생할 수 있습니다. 이 기사에서는 부드러운 스크롤을 유지하면서 이 기능을 달성하기 위한 순수한 CSS 솔루션을 살펴봅니다.

CSS 고정 위치 지정 사용:

CSS 위치: 고정 속성을 사용하면 요소가 고정 위치에 고정될 수 있습니다. 특정 지점 이상으로 스크롤하면 상단, 측면 또는 둘 다. 이 속성을 적용하면 고정 헤더 및 고정 열 효과를 얻을 수 있습니다.

단계:

1. 테이블을 컨테이너로 래핑합니다. 테이블을 보관할 div 컨테이너를 만듭니다.
2. 컨테이너: 오버플로 적용: 스크롤; 컨테이너 요소에 추가합니다.
3. 헤더를 맨 위에 고정: position:sticky 및 top: 0;을 사용하여 헤더 행(thead tr)의 위치를 ​​지정합니다.
4. 첫 번째 열을 옆에 붙입니다. 첫 번째 열 셀을 배치합니다(tbody td:first-child 또는 tbody th:first-child). 위치 사용: 고정 및 왼쪽: 0;.
5. 외관 개선을 위한 스타일 적용: 표, 머리글 및 열 요소에 스타일을 추가하여 시각적 매력을 강화합니다.

추가 고려 사항:

• 컨테이너 크기: 스크롤을 제한하려면 컨테이너에 적절한 최대 너비 및 최대 높이 속성이 있는지 확인하세요.
• z -index: z-index를 사용하여 스티커의 겹침 순서를 제어합니다. 요소.
• 브라우저 지원: 위치: 고정 속성은 최신 버전의 Chrome, Firefox 및 Edge에서 지원됩니다.

예 코드:

.container {
  max-width: 400px;
  max-height: 150px;
  overflow: scroll;
}

thead th {
  position: sticky;
  top: 0;
}

tbody td:first-child, tbody th:first-child {
  position: sticky;
  left: 0;
}

/* Styling */

thead th {
  background: #000;
  color: #FFF;
  z-index: 1;
}

tbody td, tbody th {
  padding: 0.5em;
}

tbody th {
  background: #FFF;
  border-right: 1px solid #CCC;
  box-shadow: 1px 0 0 0 #ccc;
}

table {
  border-collapse: collapse;
}

결론:

CSS 고정 위치 지정을 활용하면 테이블에서 고정된 헤더와 고정된 첫 번째 열 효과를 얻을 수 있습니다. JavaScript를 사용하지 않고. 이 솔루션은 특히 모바일 브라우저에서 원활한 스크롤 성능을 보장하는 순수 CSS 기반 접근 방식을 제공합니다.

위 내용은 CSS만 사용하여 고정 헤더와 고정 열이 있는 테이블을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!