HTML 테이블 틀 고정

HTML 테이블 틀 고정

HTML 테이블 첫 행 고정

1 예시

<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 scope="col">주문번호</th>
					<th scope="col">영업</th>
					<th scope="col">현장</th>
					<th scope="col">설계</th>
					<th scope="col">생산</th>
					<th scope="col">구매</th>
					<th scope="col">거래처명</th>
					<th scope="col">판매지역</th>
					<th scope="col">품목</th>
					<th scope="col">납기일자</th>
					<th scope="col">종결여부</th>
					<th scope="col">담당자(연락처)</th>

				</tr>
  </thead>
  <tbody>
    <tr class="employeeTr" align="center" style>
					<td>19/04/10-9</td>
					<td>최정성</td>
					<td></td>
					<td>정영진</td>
					<td></td>
					<td></td>
					<td>(주)블랙야크</td>
					<td></td>
					<td>커브파워로라(일자) [530b/f 2열홈] 외 2건</td>
					<td>19/04/11</td>
					<td>X</td>
					<td>조길묵대리 010-400-3672</td>
				</tr>

				<tr class="employeeTr" align="center">
					<td>19/04/10-6</td>
					<td>최정성</td>
					<td></td>
					<td>최홍규실장</td>
					<td></td>
					<td></td>
					<td>쿠팡 주식회사</td>
					<td>성동캠프(4/5,최정성 이사 납품완료)</td>
					<td>H-다리 외 8건</td>
					<td>2019-04-10</td>
					<td>X</td>
					<td>양승병님 010-2645-6344</td>
				</tr>

				<tr class="employeeTr" align="center">
					<td>19/04/10-7</td>
					<td>최정성</td>
					<td></td>
					<td>생산부</td>
					<td></td>
					<td></td>
					<td>씨제이대한통운(주)</td>
					<td>양천터미널(4/2,권준용대리,임권빈팀장외작업완료)</td>
					<td>컨베이어라인정렬작업및가이드고정작업 [기계3]</td>
					<td>2019-04-10</td>
					<td>X</td>
					<td>장계준님.010-2724-6690</td>
				</tr>

				<tr class="employeeTr" align="center">
					<td>19/04/10-8</td>
					<td>배기훈</td>
					<td></td>
					<td>배기훈</td>
					<td></td>
					<td></td>
					<td>(주)꼬망스</td>
					<td></td>
					<td>DAS (Digital Assorting System) [인터페이스 개발]</td>
					<td>2019-04-15</td>
					<td>X</td>
					<td></td>
				</tr>

				<tr class="employeeTr" align="center">
					<td>19/04/10-9</td>
					<td>최정성</td>
					<td></td>
					<td>구매팀</td>
					<td></td>
					<td></td>
					<td>씨제이대한통운(주)</td>
					<td></td>
					<td>신축컨베이어벨트구동감속기 [3hp,1/60]</td>
					<td>2019-04-10</td>
					<td>X</td>
					<td>김성범님,010-5452-0186</td>
				</tr>

				<tr class="employeeTr" align="center">
					<td>19/04/10-10</td>
					<td>최정성</td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td>쿠팡 주식회사</td>
					<td>구리1캠프(4/10,최정성 이사 작업완료)</td>
					<td>V벨트컨베이어전선 [2.6mm*7m] 외 2건</td>
					<td>2019-04-10</td>
					<td>X</td>
					<td>이용현님 010-5437-4268</td>
				</tr>

				<tr class="employeeTr" align="center">
					<td>19/04/10-11</td>
					<td>최정성</td>
					<td></td>
					<td>구매팀</td>
					<td></td>
					<td></td>
					<td>(주)지에스리테일 진주물류센터</td>
					<td></td>
					<td>파워롤러용 오링 [6"] 외 2건</td>
					<td>2019-04-10</td>
					<td>X</td>
					<td>시설계장님 010-2923-7846</td>
				</tr>


				<tr class="employeeTr" align="center">
					<td>19/04/10-12</td>
					<td>임훈</td>
					<td></td>
					<td>류강</td>
					<td></td>
					<td></td>
					<td>(주)한진</td>
					<td>강원도 고성군 토성면 원암리 334-23</td>
					<td>텔레스코픽벨트컨베이어 4단 [990BW×7,000~19,000Lx800H (4단)] 외 9건</td>
					<td>19/04/19</td>
					<td>X</td>
					<td>김동호 지점장님 / 010-8793-1640</td>
				</tr>
  </tbody>
</table>

2 같이 보기

• HTML 테이블 스크롤 틀 고정
• HTML 테이블 tbody 스크롤 적용 ★
• HTML 테이블 스크롤
• Excel 틀 고정