[css 활용] tbody scroll 테이블 만들기

디자이너에게 시안을 받다보면, 생긴건 table인데 tbody 영역만 스크롤이 되게끔 시안이 올 때가 있다.

 

자체 소스가 잘 짜여져 있는 회사라면, 프레임워크나 내부 grid시스템, 기타 js 등으로 해결이 원만하지만,

 

그렇지 않은 경우에 어떻게 해야 할 지 막막할 때가 있다.

 

thead 영역까지 스크롤이라면, div로 테이블을 감싸고 높이값을 줘서 overflow-y:scroll 등으로 손쉽게 해결하지만

 

thead는 고정이고 tbody만 스크롤 될 때 어떻게 짤 지 고민을 한번쯤은 해보았을 것 같다.

 

서두에 말한 방법이 없다면, 편법을 활용해 이렇게 짤 수도 있다.

 

1. HTML

<table>
  <thead>
    <tr>
      <th scope="row">분류1</th><th scope="row">분류2</th><th scope="row">분류3</th>
      <th scope="row">분류4</th><th scope="row">분류5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>내용1</td><td>내용2</td><td>내용3</td><td>내용4</td><td>내용5</td>
    </tr>
    ...
    ...
    ...
    <tr>
      <td>내용1</td><td>내용2</td><td>내용3</td><td>내용4</td><td>내용5</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>토탈1</td><td>토탈2</td><td>토탈3</td><td>토탈4</td><td>토탈5</td>
    </tr>
  </tfoot>
</table>

2. CSS

table{border-collapse:collapse;width:1080px; margin:0 auto;overflow:hidden;border:1px solid #ccc;}
table thead{float:left;width:1080px;border-bottom:1px solid #ccc;}
table thead tr{display:table;width:1080px;}

table tbody{float:left;width:1080px;height:100px;overflow-y:auto;overflow-x:hidden;}
table tbody tr{display:table;width:1080px;border-bottom:1px solid #ccc;}
table tbody tr:last-child{border-bottom:none;}

table tbody td{text-align:center;}

float로 thead와 tbody를 밀어버리고, tbody영역을 높이값을 고정값으로 줘서 스크롤 시켜버리는 방법이다.

스타일은 가장 기본스타일을 썻으니, 필요한부분만 수정해서 사용하면 용이할 것 같다.

 

※ 웹표준, 접근성등을 무시한 단순 표현입니다. 실제 코드를 작성할때에는 table caption, th scope 등을 고려해주세요