- HTML 테이블 틀 고정
- HTML 테이블 첫 행 고정
1 예시[ | ]
html
Copy
<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:500px; }
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>
2 같이 보기[ | ]
편집자 210.178.131.103 Jmnote 220.120.218.251 164.124.106.143 Jmnote bot
로그인하시면 댓글을 쓸 수 있습니다.