HTML에서 테이블 헤더가 움직이지 않게 만드는 방법
- 藏色散人원래의
- 2021-06-03 11:05:063911검색
HTML에서 고정된 테이블 헤더를 얻는 방법: 먼저 tbody 태그에서 콘텐츠가 스크롤되는 영역을 제어하고 "overflow-y: auto;" 스타일을 추가한 다음 "table-layout:fixed"를 추가합니다. ;"를 tr 태그에 추가하면 미터 헤드를 고정할 수 있습니다.
이 기사의 운영 환경: Windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.
HTML 테이블 테이블 고정 헤더 tbody 및 스크롤 막대
순수한 CSS 테이블 테이블 광고 고정 tbody 스크롤 효과
프로젝트 요구로 인해 테이블에서 데이터 양이 증가하면 스크롤 막대가 나타나고 스크롤 프로세스에서는 기본적으로 테이블 헤더가 테이블 내용과 함께 스크롤되어 헤더에 해당하는 필드 이름이 표시되지 않아 경험에 영향을 미칩니다.
구현 아이디어:
콘텐츠가 스크롤되는 영역을 제어합니다. tbody 태그에 Overflow-y: auto; 스타일을 추가하고 table-layout:fixed; tbody의 경우 스크롤 막대도 공간을 차지해야 하므로 tbody와 thead가 잘못 정렬됩니다. 따라서 tbody의 너비를 설정할 때 스크롤 막대의 너비도 조정해야 합니다. [스크롤바를 표시하지 않으려면 스크롤바 너비를 0px로 설정하고 스크롤바를 없애면 됩니다.
다음은 렌더링이며 구체적인 전체 예제 코드도 아래에 있습니다.
전체 예제 코드:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>纯CSS table表格 thead固定 tbody滚动</title>
<style>
.table-box {
margin: 100px auto;
width: 1024px;
}
/* 滚动条宽度 */
::-webkit-scrollbar {
width: 8px;
background-color: transparent;
}
/* 滚动条颜色 */
::-webkit-scrollbar-thumb {
background-color: #27314d;
}
table {
width: 100%;
border-spacing: 0px;
border-collapse: collapse;
}
table caption{
font-weight: bold;
font-size: 24px;
line-height: 50px;
}
table th, table td {
height: 50px;
text-align: center;
border: 1px solid gray;
}
table thead {
color: white;
background-color: #38F;
}
table tbody {
display: block;
width: calc(100% + 8px); /*这里的8px是滚动条的宽度*/
height: 300px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
table tfoot {
background-color: #71ea71;
}
table thead tr, table tbody tr, table tfoot tr {
box-sizing: border-box;
table-layout: fixed;
display: table;
width: 100%;
}
table tbody tr:nth-of-type(odd) {
background: #EEE;
}
table tbody tr:nth-of-type(even) {
background: #FFF;
}
table tbody tr td{
border-bottom: none;
}
</style>
</head>
<body>
<section>
<table cellpadding="0" cellspacing="0">
<caption>纯CSS table表格 thead固定 tbody滚动</caption>
<thead>
<tr>
<th>序 号</th>
<th>姓 名</th>
<th>年 龄</th>
<th>性 别</th>
<th>手 机</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Name</td>
<td>28</td>
<td>女</td>
<td>Mobile</td>
</tr>
<tr>
<td>002</td>
<td>Name</td>
<td>28</td>
<td>男</td>
<td>Mobile</td>
</tr>
<tr>
<td>003</td>
<td>Name</td>
<td>28</td>
<td>女</td>
<td>Mobile</td>
</tr>
<tr>
<td>004</td>
<td>Name</td>
<td>28</td>
<td>男</td>
<td>Mobile</td>
</tr>
<tr>
<td>005</td>
<td>Name</td>
<td>28</td>
<td>女</td>
<td>Mobile</td>
</tr>
<tr>
<td>006</td>
<td>Name</td>
<td>28</td>
<td>男</td>
<td>Mobile</td>
</tr>
<tr>
<td>007</td>
<td>Name</td>
<td>28</td>
<td>女</td>
<td>Mobile</td>
</tr>
<tr>
<td>008</td>
<td>Name</td>
<td>28</td>
<td>男</td>
<td>Mobile</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">【table，thead，tbody，tfoot】 colspan：合并行， rowspan：合并列 </td>
</tr>
</tfoot>
</table>
</section>
</body>
</html>[추천 학습: html 비디오 튜토리얼]
위 내용은 HTML에서 테이블 헤더가 움직이지 않게 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!