HTML 테이블 tbody 스크롤 적용

Jmnote (토론 | 기여)님의 2015년 10월 29일 (목) 12:12 판 (→‎같이 보기)

1 개요

HTML 테이블 스크롤 적용 2
HTML 테이블 tbody 스크롤 적용
<style>
table {
    display: block;
    width: 320px;
    border-collapse: collapse;
    border: 2px solid #000;
}
th { border: 1px solid #000; background: pink; }
td { border: 1px solid #000; border-top: 0; }
tbody {
    display: block;
    height: 200px;
    overflow: auto;
}
th:nth-of-type(1), td:nth-of-type(1) { width: 40px; }
th:nth-of-type(2), td:nth-of-type(2) { width: 80px; }
th:nth-of-type(3), td:nth-of-type(3) { width: 100px; }
th:last-child { width: 100px; }
td:last-child { width: calc( 100px - 19px );  }
</style>
<table>
	<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 같이 보기

3 참고 자료

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}