#func; table에서 특정영역이 고정된 가로 스크롤 생성
by Bigdaditor# HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>가로 스크롤</title>
</head>
<body>
<!-- 세로 스크롤이 들어갈 영역 -->
<div class="vertical">
<div class="wrap">
<table class="wrapTable">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<td>1-1</td>
<td>2-1</td>
<td>3-1</td>
<td>4-1</td>
</tr>
<tr>
<td>1-2</td>
<td>2-2</td>
<td>3-2</td>
<td>4-2</td>
</tr>
<tr>
<td>1-3</td>
<td>2-3</td>
<td>3-3</td>
<td>4-3</td>
</tr>
</table>
</div>
<!-- 가로 스크롤이 반영되는 영역 -->
<div class="horizon">
<table class="horizonTable">
<tr>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
</tr>
<tr>
<td>6-1</td>
<td>7-1</td>
<td>8-1</td>
<td>9-1</td>
<td>10-1</td>
</tr>
<tr>
<td>6-2</td>
<td>7-2</td>
<td>8-2</td>
<td>9-2</td>
<td>10-2</td>
</tr>
<tr>
<td>6-3</td>
<td>7-3</td>
<td>8-3</td>
<td>9-3</td>
<td>10-3</td>
</tr>
</table>
</div>
</div>
<!-- 가로 스크롤 영역 -->
<div class="scroll">
<div class="scrollContent">
</div>
</div>
</body>
</html>- table을 움직이지 않는 table(wrapTable)하나와 그렇지 않은 table(horizonTable)을 나눠서 만들어줍니다.
- div(scroll)에 가로 스크롤을 만들어 줍니다.
# CSS
/*
내용이 세로로 많으면 스크롤 지정
*/
.vertical {
width: max-content;
overflow-y: scroll;
}
/*
두 개의 테이블을 옆으로 나란히 배치하기 위해
float 속성을 사용함
*/
.wrap {
float: left;
}
.wrapTable tr th,td {
border: 1px solid black;
}
/*
스크롤이 생성되는 영역이 아니고
내용이 안보여야해서 overflow속성은 hidden으로 지정
*/
.horizon {
width: 100px;
overflow-x: hidden;
}
.horizonTable {
width: max-content;
}
.horizonTable tr th,td {
border: 1px solid black;
}
/*
실제로 스크롤이 생성되는 영역이라서
내용이 overflow속성을 scroll로 지정
*/
.scroll {
height: 20px;
overflow-x: scroll;
}
.scrollContent {
height: 20px;
}
# JQuery
$(function() {
$(".scroll").width($(".horizon").width());
$(".scrollContent").width($(".horizonTable").width());
$(".scroll").on("scroll", function(e){
$(".horizon").scrollLeft($(".scroll").scrollLeft());
});
});- div(scroll)를 div(horizon)과 같은 크기로 지정해줍니다.
- div(scroll) 안에 div(scrollContent)를 table(horizonTable)과 같은 크기로 지정해줍니다.
- div(scroll)은 overflow-x속성이 scroll입니다.
- div(scrollContent)의 크기를 table(horizonTable)과 같은 크기를 줬기 때문에 스크롤이 같습니다.
- scrollLeft 함수는 선택자가 가로로 스크롤한 위치 값을 반환합니다.
- div(scroll)이 가로로 스크롤한 위치값을 div(horizon)에 반영해서 동시에 움직이는 것 처럼 보이게 해줍니다.
'Web' 카테고리의 다른 글
| #func; 사이드 드롭다운 메뉴 숨기기 (0) | 2021.06.24 |
|---|
블로그의 정보
DataEdit
Bigdaditor