uknowapps

uknowapps.egloos.com

포토로그



CSS table에서 첫번째 tr 고정 나머지 tr 스크롤 처리하기 CSS

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>


덧글

댓글 입력 영역



애드센스 수평