HTML 테이블 스크롤 적용

HTML 테이블 스크롤 적용

HTML 테이블에 스크롤 만들기

1 방법 1: table 스타일

• table 스타일에 크기(너비, 높이) 지정 + display: block; + overflow: auto;

<style>
table {
    width: 250px; height:200px;
    display: block;
    overflow: auto;
</style>

<table border='1px' cellspacing='0'>
	<tr><th>#</th><th>이름</th><th>생년월일</th><th>포지션</th></tr>
	<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>
</table>

2 방법 2: div 래퍼 스타일

• 테이블을 <div> 태그로 감싸고, 크기(너비, 높이) 지정 + overflow: auto;

<style>
.table-wrapper {
    width: 250px; height:200px;
    overflow: auto;
    border:2px solid red;
}
</style>

<div class='table-wrapper'>
    <table border='1px' cellspacing='0'>
        <tr><th>#</th><th>이름</th><th>생년월일</th><th>포지션</th></tr>
        <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>
    </table>
</div>

3 같이 보기

• HTML div에 스크롤바 붙이기
• CSS overflow 속성
• CSS display 속성
• HTML 테이블
• 스크롤

4 참고 자료

• http://blog.daum.net/zizipe/5