CSS table에서 첫번째 tr 고정 나머지 tr 스크롤 처리하기
table에서 첫번째 tr 고정 나머지 tr 스크롤 처리하기
table에서 첫번째 tr 고정 나머지 tr 스크롤되도록 처리하고 싶으면 첫번째 tr에 position: absolute를 주고 table를 div로 감싼다. table를 감싸고 있는 div에는 overflow-y: scroll를 지정한다.
<style type="text/css">
.main {
padding-top:34px;
}
.box {
width: 600px;
height: 150px;
overflow-y: scroll;
}
table {
width: 100%;
text-align: center;
border-collapse:collapse;
}
tr.title {
margin: -33px 0px 0px -1px;
width: 600px;
display: table;
position: absolute;
background-color: #5dcafc;
}
th, td {
padding: 6px;
}
</style>
<div class="main">
<div class="box">
<table>
<tr class="title">
<th>국가</th>
<th>수도</th>
<th>언어</th>
</tr>
<tr>
<td>대한민국</td>
<td>서울</td>
<td>한국어</td>
</tr>
<tr>
<td>미국</td>
<td>워싱턴</td>
<td>영어</td>
</tr>
<tr>
<td>중국</td>
<td>베이징</td>
<td>중국어</td>
</tr>
<tr>
<td>프랑스</td>
<td>파리</td>
<td>프랑스어</td>
</tr>
<tr>
<td>영국</td>
<td>런던</td>
<td>영어</td>
</tr>
<tr>
<td>헝가리</td>
<td>부다페스트</td>
<td>헝가리어</td>
</tr>
</table>
</div>
</div>
