HTML 테이블 첫 행 고정

by JM note

HTML

<style>
body { margin:0; }
table {
  margin: 32px 0 0;
  border-collapse:collapse;
}  
thead {
  position: fixed;
  top: 0;
  background: #cdefff;
}
th {
  border:1px solid silver;
  height: 30px;
}
td { border:1px solid silver; }
th:nth-of-type(1), td:nth-of-type(1) { width:50px; }
th:nth-of-type(2), td:nth-of-type(2) { width:150px; }
tr:nth-child(even) { background: #eee; }
</style>
<table>
  <thead>
    <tr><th>번호</th><th>이름</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>한놈</td></tr>
    <tr><td>2</td><td>두시기</td></tr>
    <tr><td>3</td><td>석삼</td></tr>
    <tr><td>4</td><td>너구리</td></tr>
    <tr><td>5</td><td>오징어</td></tr>
    <tr><td>6</td><td>한놈</td></tr>
    <tr><td>7</td><td>두시기</td></tr>
    <tr><td>8</td><td>석삼</td></tr>
    <tr><td>9</td><td>너구리</td></tr>
    <tr><td>10</td><td>오징어</td></tr>
    <tr><td>11</td><td>한놈</td></tr>
    <tr><td>12</td><td>두시기</td></tr>
    <tr><td>13</td><td>석삼</td></tr>
    <tr><td>14</td><td>너구리</td></tr>
    <tr><td>15</td><td>오징어</td></tr>
    <tr><td>16</td><td>한놈</td></tr>
    <tr><td>17</td><td>두시기</td></tr>
    <tr><td>18</td><td>석삼</td></tr>
    <tr><td>19</td><td>너구리</td></tr>
    <tr><td>20</td><td>오징어</td></tr>
  </tbody>
</table>