이 기사에서는 html 테이블 헤더 고정 구현을 소개하고 자세한 내용을 모든 사람과 공유합니다.
<div class=wrapbox> <div class=table-head> <table> <thead> <th width=10%>계약 번호</th> <th width=30%>계약 고객</th> <th width= 20%>고객 해제</th> <th width=10%>계약 상태</th> <th width=30%>선택한 조건의 해제 주기 할당량</th> </thead> </table> </ div > <div 클래스=테이블-본문> <테이블> <tbody id=tbody> </tbody> </table> </div></div>
CSS를 살펴보세요
*{ 패딩:0; 여백:0; } 번째{ 테두리: 1px 솔리드 #e6e6e6; 색상:#666666; 글꼴 크기: 16px } 테이블 { 테두리 축소: 너비: 100% ; } td { 패딩:5px; 테두리:1px 솔리드 #e6e6e6; } .table-head{padding-right:17px; background-color:rgb(207, 231, 179);color:#000;height:5vh;} .table-body{width:100% height:94vh;overflow -y:scroll;} .table-head 테이블, .table-body 테이블{width:100%;} .table-body 테이블 tr:nth-child(2n+1){배경 색상:#f2f2f2;} .table-body 테이블 tr:hover { 배경 색상:rgb(240, 249, 228) 전환: .2s;클릭하시면 효과를 보실 수 있습니다
사실 핵심은
1. colgroup 태그를 사용하여 상위 및 하위 테이블의 열 너비를 정의하여 일관성을 유지합니다.
2. 위쪽 div .table-head에 padding-right 스타일(17px)을 추가합니다. 이 너비는 아래쪽 div .table-body의 스크롤 막대와 일치하도록 하기 위한 것입니다. -body는 오버플로 스타일을 추가합니다.- y:scroll;
위의 두 가지 사항을 보장하는 한 고정된 헤더가 있는 테이블을 만들 수도 있으며 동시에 상단 및 하단 열의 정렬 문제가 발생하지 않습니다.
위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.