HTML 테이블 tbody 스크롤 적용, head 고정2 > html

본문 바로가기

html

HTML 테이블 tbody 스크롤 적용, head 고정2

페이지 정보

작성자 서방님 댓글 0건 조회 30회 작성일 19-05-09 09:27

본문

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<style>
.fixed-table-container {
		width: 600px;
		height: 200px;
		border: 1px solid #000;
		position: relative;
		padding-top: 30px; /* header-bg height값 */
}
.header-bg {
		background: skyblue;
		height: 30px; /* header-bg height값 */
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		border-bottom: 1px solid #000;
}
.table-wrapper {
		overflow-x: hidden;
		overflow-y: auto;
		height: 100%;
}
table {
		width: 100%;
		border-collapse: collapse;
}
td {
		border-bottom: 1px solid #ccc;
		padding: 5px;
}
td + td {
		border-left: 1px solid #ccc;
}
th {
		padding: 0px; /* reset */
}
.th-text {
		position: absolute;
		top: 0;
		width: inherit;
		line-height: 30px; /* header-bg height값 */
		border-left: 1px solid #000;
}
th:first-child .th-text {
		border-left: none;
}
</style>
</head>
<body>
<div class="fixed-table-container">
	<div class="header-bg"></div>
	<div class="table-wrapper">
		<table>
			<thead>
			<tr>
				<th width="20%"> <!-- %넓이 값을 지정을 위해 div를 포함시켰다. -->
				<div class="th-text">제목1</div>
				</th>
				<th width="30%">
				<div class="th-text">제목2</div>
				</th>
				<th width="50%">
				<div class="th-text">제목3</div>
				</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>

			</tbody>
		</table>
	</div>
</div>
</body>
</html>

댓글목록

등록된 댓글이 없습니다.

Total 315건 1 페이지
게시물 검색

회원로그인

접속자집계

오늘
55
어제
152
최대
592
전체
76,943

그누보드5
Copyright © 서방님.kr All rights reserved.