반응형
디자이너에게 시안을 받다보면, 생긴건 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 등을 고려해주세요
반응형
'CSS > CSS 활용' 카테고리의 다른 글
| [css] 미디어쿼리 분기점 (0) | 2019.12.26 |
|---|---|
| [css 활용] 텍스트/컨텐츠 숨김처리 (3) | 2019.12.20 |
| [css 활용] input type="search" 커스텀(x버튼 없애기) (0) | 2019.11.28 |
| [css] 벤더 프리픽스(vendor prefix) (0) | 2019.11.25 |
