[CSS 활용]헤더가 고정 되는 테이블, html css

 

 
 

버튼 클릭 -> 지정한 내용 복사 (해시태그내용 복사) 

 
 

사용되는 요소 

이미지 맵  태그안에 usemap 속성 / 제이쿼리 소스  
 
 

html

<div class="tableWrapper">
 <table class="bluetop" id="userListTable">
  <tr>
    <th>헤더</th>
    <th>헤더02</th>
    <th>헤더03</th>
  </tr>
  <tr><td>111</td><td>111</td><td>111</td></tr>
  <tr><td>222</td><td>222</td><td>222</td></tr>
  <tr><td>333</td><td>333</td><td>333</td></tr>
  <tr><td>444</td><td>444</td><td>444</td></tr>
  <tr><td>111</td><td>111</td><td>111</td></tr>
  <tr><td>222</td><td>222</td><td>222</td></tr>
  <tr><td>333</td><td>333</td><td>333</td></tr>
  <tr><td>444</td><td>444</td><td>444</td></tr>
</table>
</div>

 
 

제이쿼리 소스

.tableWrapper {
  border-top: 3px solid #168;
    width: 400px;
    height: 300px;
    overflow: auto;
    position: relative;
}

#userListTable {
    height:600px;
}

#userListTable th {
    width: 400px;
    position: sticky;
    top: 0px;
}
.bluetop {
  border-collapse: collapse;
  line-height:16px;
} 
.bluetop th, .bluetop td {
  border: 1px solid #ddd;
  text-align:center;
}
.bluetop th {
  color: #168;
  background: #f0f6f9;
}
.bluetop th:first-child, .bluetop td:first-child {
  border-left: 0;
}
.bluetop th:last-child, .bluetop td:last-child {
  border-right: 0;
}

 
 
 
 

결과