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>