> 웹 프론트엔드 > CSS 튜토리얼 > CSS만 사용하여 고정 헤더가 있는 스크롤 가능한 테이블을 만드는 방법은 무엇입니까?

CSS만 사용하여 고정 헤더가 있는 스크롤 가능한 테이블을 만드는 방법은 무엇입니까?

Susan Sarandon
풀어 주다: 2024-12-16 10:20:13
원래의
421명이 탐색했습니다.

How to Create a Scrollable Table with Fixed Headers Using Only CSS?

CSS를 사용하여 고정 헤더가 있는 스크롤 가능한 테이블

고정 헤더를 위한 CSS 전용 솔루션

문제:

고정 헤더가 있는 스크롤 가능한 테이블 만들기 JavaScript나 jQuery를 요구하지 않고 CSS와 유효한 테이블 태그만 사용하는 바닥글입니다. 머리글, 바닥글 및 콘텐츠 행 간에 열 정렬이 일관되게 유지되는지 확인하세요.

해결책:

위치 사용: 고정

  1. 테이블을 랩으로 감싸주세요 div: 스크롤 영역을 정의합니다.

    div {
      display: inline-block;
      height: 150px;
      overflow: auto;
    }
    로그인 후 복사
  2. 적용 위치: 테이블에 고정 헤더:

    table th {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
    }
    로그인 후 복사

스타일링

테이블 모양을 다음과 같이 사용자 정의합니다. 필요함:

table {
  border-collapse: collapse;
}

th {
  background-color: #1976D2;
  color: #fff;
}

th,
td {
  padding: 1em .5em;
}

table tr {
  color: #212121;
}

table tr:nth-child(odd) {
  background-color: #BBDEFB;
}
로그인 후 복사

예:

<div>
  <table border="0">
    <thead>
      <tr>
        <th scope="col">head1</th>
        <th scope="col">head2</th>
        <th scope="col">head3</th>
        <th scope="col">head4</th>
      </tr>
    </thead>
    <tbody>
      <!-- Insert rows here -->
    </tbody>
  </table>
</div>
로그인 후 복사

참고:

  • 직위와의 호환성을 확인하세요. CanIUse와 같은 리소스를 사용하여 이 솔루션을 사용하기 전에 끈적끈적합니다.
  • 일부에서는 브라우저에서는 헤더가 내용과 완벽하게 정렬되지 않을 수 있습니다. 필요한 경우 고정 속성의 최상위 값을 조정합니다.
  • 이 솔루션은 세로 스크롤만 허용합니다. 가로 스크롤은 지원되지 않습니다.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿