HTML 테이블 tbody 스크롤 적용, head 고정2
페이지 정보
작성자 서방님 댓글 0건 조회 132회 작성일 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>
댓글목록
등록된 댓글이 없습니다.
