질문:
스크롤 가능 테이블을 생성하는 CSS 전용 솔루션이 있습니까? 브라우저 간 고정 헤더가 있는 테이블 규정을 준수합니까?
요구 사항:
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 중국어 웹사이트의 기타 관련 기사를 참조하세요! JavaScript jquery css if for while using Property this position overflow viewport column table tbody td tr th 성명: 본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요. |
---|