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 중국어 웹사이트의 기타 관련 기사를 참조하세요!