HTML 테이블 tbody 스크롤 적용

1 개요

HTML 테이블 스크롤 적용 2

HTML 테이블 tbody 스크롤 적용

• 테이블 헤더(thead)는 고정한 채, tbody에만 스크롤을 적용
• tbody에 스크롤을 적용하려면 display:block;을 주어야 하는데, 그렇게 하면 thead와 tbody 사이의 컬럼 정렬이 깨진다.
• 컬럼 정렬을 맞춰주기 위해 각 컬럼의 너비를 지정한다.

<style>
.scrolltbody {
    display: block;
    width: 320px;
    border-collapse: collapse;
    border: 2px solid #000;
}
.scrolltbody th { border: 1px solid #000; background: pink; }
.scrolltbody td { border: 1px solid #000; border-top: 0; }
.scrolltbody tbody {
    display: block;
    height: 200px;
    overflow: auto;
}
.scrolltbody th:nth-of-type(1), .scrolltbody td:nth-of-type(1) { width: 40px; }
.scrolltbody th:nth-of-type(2), .scrolltbody td:nth-of-type(2) { width: 80px; }
.scrolltbody th:nth-of-type(3), .scrolltbody td:nth-of-type(3) { width: 100px; }
.scrolltbody th:last-child { width: 100px; }
.scrolltbody td:last-child { width: calc( 100px - 19px );  }
</style>
<table class='scrolltbody'>
	<thead>
		<tr><th>#</th><th>이름</th><th>생년월일</th><th>포지션</th></tr>
	</thead>
	<tbody>
		<tr><td>1</td><td>김영광</td><td>1983-06-28</td><td>골키퍼</td></tr>
		<tr><td>2</td><td>김진현</td><td>1987-07-06</td><td>골키퍼</td></tr>
		<tr><td>3</td><td>정성룡</td><td>1985-01-04</td><td>골키퍼</td></tr>
		<tr><td>4</td><td>윤석영</td><td>1990-02-13</td><td>수비수</td></tr>
		<tr><td>5</td><td>곽태휘</td><td>1981-07-08</td><td>수비수</td></tr>
		<tr><td>6</td><td>오범석</td><td>1984-07-29</td><td>수비수</td></tr>
		<tr><td>7</td><td>김기희</td><td>1989-07-13</td><td>수비수</td></tr>
		<tr><td>8</td><td>정인환</td><td>1986-12-15</td><td>수비수</td></tr>
		<tr><td>9</td><td>신광훈</td><td>1987-03-18</td><td>수비수</td></tr>
		<tr><td>10</td><td>김영권</td><td>1990-02-27</td><td>수비수</td></tr>
		<tr><td>11</td><td>박주호</td><td>1987-01-16</td><td>수비수</td></tr>
		<tr><td>12</td><td>이청용</td><td>1988-07-02</td><td>미드필더</td></tr>
		<tr><td>13</td><td>손흥민</td><td>1992-07-08</td><td>미드필더</td></tr>
		<tr><td>14</td><td>김보경</td><td>1989-10-06</td><td>미드필더</td></tr>
		<tr><td>15</td><td>하대성</td><td>1985-03-02</td><td>미드필더</td></tr>
		<tr><td>16</td><td>이승기</td><td>1988-06-02</td><td>미드필더</td></tr>
		<tr><td>17</td><td>김정우</td><td>1982-05-09</td><td>미드필더</td></tr>
		<tr><td>18</td><td>이근호</td><td>1985-04-11</td><td>미드필더</td></tr>
		<tr><td>19</td><td>박종우</td><td>1989-03-10</td><td>미드필더</td></tr>
		<tr><td>20</td><td>기성용</td><td>1989-01-24</td><td>미드필더</td></tr>
		<tr><td>21</td><td>남태희</td><td>1991-07-03</td><td>미드필더</td></tr>
		<tr><td>22</td><td>김신욱</td><td>1988-04-14</td><td>공격수</td></tr>
		<tr><td>23</td><td>박주영</td><td>1985-07-10</td><td>공격수</td></tr>
	</tbody>
</table>

2 같이 보기

• HTML 테이블 스크롤 적용
• HTML 테이블 틀 고정
• HTML tbody 태그

3 참고

• http://jsfiddle.net/hashem/crspu/555/
• http://blog.publisher.name/339