반응형
1. html 작성하기
전체를 whole1 로 감싸고 왼쪽 테이블은 topbox1 , 오른쪽 테이블은 topbox2 로 이름을 주었습니다.
스크롤이 움직여도 고정시켜줄 th 부분은 다른 테이블로 만들어 총 2개의 테이블로 구성하였습니다.
toptable1은 전체적으로 봤을때 헤더(th)부분, middlebox 부분이 전체적으로 봤을때 tr, td부분이됩니다.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="../assets/css/main_styleTT.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script type="text/javascript" src="/resources/js/jquery-2.2.4.min.js"></script>
</head>
<body>
<div class="content">
<div class="center">
<div class="whole1">
<div class="topbox1">
<table class="toptable1 colr_table2">
<tr class="fix_head">
<th class="w40">이름</th>
<th class="w20">미술</th>
<th class="w20">음약</th>
<th class="w20">체육</th>
</tr>
</table>
<div class="middlebox">
<div class="box2 scrollnone">
<table class="colr_table2">
<colgroup>
<col width="40%">
<col width="20%">
<col width="20%">
<col width="20%">
</colgroup>
<tr>
<th>김00</th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
<tr>
<th>이00</th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
<tr>
<th>박00</th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
<tr>
<th>한00</th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
<tr>
<th>홍00</th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
<tr>
<th>류00</th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
<tr>
<th>윤00</th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
<tr>
<th>김00</th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
<tr>
<th>황00</th>
<th>0</th>
<th>0</th>
<th></th>
</tr>
<tr>
<th>윤00</th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
<tr>
<th>이00</th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
<tr>
<th>어00</th>
<th>0</th>
<th>0</th>
<th></th>
</tr>
<tr>
<th>왕00</th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
<tr>
<th>심00</th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
<tr>
<th>유00</th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
<tr>
<th>곽00</th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
<tr>
<th>백00</th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
<tr>
<th>임00</th>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
2. css 스타일 적용하기
중요한 것은 고정시킨 헤더부분 .fix_head 에 넓이를
position: absolute;
display: inline-table;
width: calc(100% - 18px);
로 주어야합니다. 스크롤의 가로 넓이가 저는 18px이었기때문에 전체 100%에서 스크롤 가로 넓이만큼을 빼준 후 middlebox 콜그룹 비율과 같게 조절하였습니다. 스타일로 "style= width: 40%" 로 div안에 줄 수도 있지만 저는 간단하게 css에서 정의를 해놓은 적용하였습니다. css에서 미리 정의를 해놓으면 나중에 한번에 width: 40% 를 60%로 바꿀 때 css만 한번 변경하기 때문에 편리합니다.
내가 정의한 css
.w40{ width: 40%}
.w20{ width : 20%}
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
.whole1 {
width: 97%;
position: relative;
height: 660px;
margin: 0 auto;
margin-top: 10px;
float: left;
margin-left: 40px;
}
.topbox1 {
position: absolute;
top: 0;
left: 0;
height: 54px;
background: #edf1f5;
width: 46%;
border-top: 0px;
}
.topbox2 {
position: absolute;
top: 0;
left: 50%;
height: 54px;
background: #edf1f5;
width: 46%;
border-top: 0px;
}
.middlebox {
position: absolute;
top: 54px;
left: 0;
width: 100%;
height: 500px;
}
.box2 {
top: 0;
left: 0;
height: 580px;
overflow-y: scroll;
margin: 0 auto;
width: 100%;
float: left;
border-collapse: collapse;
border-bottom: 1px solid rgba(179, 179, 179, 0.4);
}
.toptable1 {
position: absolute;
top: 0;
left: 1px;
width: 100%;
border-collapse: collapse;
z-index: 999;
border-top: 0px;
}
.toptable1 th {
top: 0;
left: 0;
border-collapse: collapse;
background: #edf1f5;
;
height: 52px;
border-top: 0px;
}
.colr_table2 {
border-collapse: collapse;
width: 100%;
float: left;
}
.colr_table2 th {
border: 1px solid #cacaca;
text-align: center;
line-height: 44px;
font-size: 14px;
}
.fix_head {
position: absolute;
display: inline-table;
width: calc(100% - 18px);
height: 54px;
left: -1px;
border-top: 0px;
}
.w20 {
width: 20%;
}
.w40 {
width: 40%;
}
반응형
'html & css3' 카테고리의 다른 글
| [html/css] 반응형 웹디자인 기초 정리(1) (0) | 2020.11.13 |
|---|---|
| [html/css] 간단하게 scrollbar 스크롤바 두개 동시에 움직이기 (0) | 2020.11.12 |
| [html] 폼태그 그룹 정리 / select-option 과 datalist - option 차이, optgroup과 option (0) | 2020.11.10 |
| Formtag 폼 태그 필수속성, Input type 정리(2) (0) | 2020.11.09 |
| Formtag 폼 태그 필수속성, Input type 정리(1) (0) | 2020.11.08 |
