>웹 프론트엔드 >CSS 튜토리얼 >CSS만으로 고정 헤더가 있는 브라우저 간 호환 스크롤 가능 테이블을 만들 수 있습니까?

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

Patricia Arquette
Patricia Arquette원래의
2024-12-06 13:39:17276검색

Can CSS Alone Create a Cross-Browser Compatible Scrollable Table with Fixed Headers?

고정 헤더가 있는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.