HTML 테이블 스크롤 적용

HTML 테이블 스크롤 적용
HTML 테이블에 스크롤 만들기
HTML 테이블에 스크롤바 붙이기

1 방법 1: table 스타일[ | ]

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

<style>
.scrolltable {
  display: block;
  overflow: auto;
}
table {
  width: 250px; height:200px;
  border: 1px solid #000;
  border-spacing: 0;
}
th {
  border: 1px solid #000;
  background: #ace;
}
td {
  border: 1px solid #000;
}
</style>

<table class='scrolltable'>
  <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;
}
table {
  border: 1px solid #000;
  border-spacing: 0;
}
th {
  border: 1px solid #000;
  background: #ace;
}
td {
  border: 1px solid #000;
}
</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 같이 보기[ | ]

4 참고[ | ]

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