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

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

원천：php.cn

이전 기사：의사 요소 ::이전 및 ::이후에 CSS에 SVG를 어떻게 포함할 수 있나요? 다음 기사：jQuery에서 고정 높이에서 자동 높이로 Div에 애니메이션을 적용하는 방법은 무엇입니까?

본 웹사이트의 성명

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

저자별 최신 기사

에서 2024-04-29 11:01:01

2497

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

2641