CSS만으로 고정 헤더가 있는 브라우저 간 호환 스크롤 가능 테이블을 만들 수 있습니까?

고정 헤더가 있는 CSS 전용 스크롤 가능 테이블

질문:

스크롤 가능 테이블을 생성하는 CSS 전용 솔루션이 있습니까? 브라우저 간 고정 헤더가 있는 테이블 규정을 준수합니까?

요구 사항:

• 머리글, 바닥글 및 콘텐츠 행 간의 열 정렬을 유지하세요.
• 머리글과 바닥글을 고정한 상태로 유지하세요. 콘텐츠가 수직으로 스크롤됩니다
• jQuery 또는 JavaScript 없음 필수
• 테이블 관련 태그(table, thead, tbody, tr, th, td)만 사용

Position: Sticky를 사용한 솔루션:

호환성 참고: 이것을 사용하기 전에 position:sticky 지원을 확인하세요. 솔루션.

position:sticky는 가장 가까운 스크롤 상위 항목 또는 스크롤 상위 항목이 없는 경우 뷰포트를 기준으로 요소의 위치를 ​​지정합니다. 이 동작은 원하는 고정 헤더와 일치합니다.

그러나 position:sticky를

, 또는 에 할당하면 됩니다. 태그는 다양한 브라우저에서 문제가 발생합니다. 대신

스크롤 오버플로를 정의하는 래퍼 요소 내의 셀.

코드:

div {
  display: inline-block;
  height: 150px;
  overflow: auto;
}

table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

/* Styling */
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>
      <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
        <td>row 1, cell 2</td>
        <td>row 1, cell 2</td>
      </tr>
      <!-- additional rows omitted for brevity -->
    </tbody>
  </table>
</div>

위 내용은 CSS만으로 고정 헤더가 있는 브라우저 간 호환 스크롤 가능 테이블을 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!