|
|
| 19번째 줄: |
19번째 줄: |
| height: 30px; | | 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>
| |
| </source>
| |
| <jsfiddle height='160'>L5wskfdw</jsfiddle>
| |
|
| |
| ==같이 보기==
| |
| * [[HTML 테이블 스크롤 틀 고정]]
| |
| * [[HTML 테이블 tbody 스크롤 적용]] ★
| |
| * [[HTML 테이블 스크롤]]
| |
| * [[Excel 틀 고정]]
| |
|
| |
| [[분류: HTML table]]
| |
| [[분류: HTML table]]
| |
2019년 12월 8일 (일) 19:21 판
- HTML 테이블 틀 고정
- HTML 테이블 첫 행 고정
예시
<source lang='html' highlight='8-9'>
<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;
}
