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