position:sticky 및 top:0을 설정하면 HTML 테이블의 스크롤에 고정 헤더를 만들 수 있습니다.
예시
다음 예는 이것을 구현하는 방법에 대한 아이디어를 제공합니다 -
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: white;
display: flex;
padding: 2%;
background-color: rgba(190,155,150);
height: 135px;
overflow-y: scroll;
}
td,th,p {
text-align: center;
font-size: 1.25em;
}
table {
padding: 3%;
border-collapse: collapse;
border: 2px ridge green;
}
th {
top: 0;
position: sticky;
background: #e5d2f1;
color: black;
}
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>A </th>
<th>B </th>
<th>C </th>
<th>D </th>
<th>E </th>
</tr>
</thead>
<tr>
<td>Hey</td>
<td>Hey</td>
<td>Hey</td>
<td>Hey</td>
<td>Hey</td>
</tr>
<tr>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
</tr>
<tr>
<td>Yo</td>
<td>Yo</td>
<td>Yo</td>
<td>Yo</td>
<td>Yo</td>
</tr>
<tr>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
</tr>
</table>
<p>
Duis tincidunt fermentum ipsum vel sagittis. Sed ultrices quis dui ut rutrum. Quisque et varius tellus, ut vestibulum purus. Etiam in erat fringilla, laoreet libero eu, facilisis ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis eu ornare augue, ut facilisis odio.
</p>
</div>
</body>
</html> 출력
이것은 다음과 같은 결과를 생성합니다 -
예시
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 2%;
height: 40px;
overflow-y: scroll;
box-shadow: inset 0 0 12px lightgreen;
}
tr th {
background: #25f2f1;
}
table {
text-align: center;
position: relative;
border-collapse: separated;
width: 100%;
}
th {
top: 0;
position: sticky;
background: white;
}
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>A </th>
<th>B </th>
<th>C </th>
<th>D </th>
<th>E </th>
</tr>
</thead>
<tr>
<td>Hey</td>
<td>Hey</td>
<td>Hey</td>
<td>Hey</td>
<td>Hey</td>
</tr>
<tr>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
</tr>
<tr>
<td>Yo</td>
<td>Yo</td>
<td>Yo</td>
<td>Yo</td>
<td>Yo</td>
</tr>
<tr>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
</tr>
</table>
</div>
</body>
</html> 출력
이것은 다음과 같은 결과를 생성합니다 -
