테이블에 스크롤 추가하기

 

 

tbody에 스크롤을 넣기 위해 display 속성을 bolck으로 변경하는걸 봤는데

 

(** overflow 속성이 display: table에서 작동 안하기 때문에 block으로 변경

 ** tbody를 block으로 수정하면 테이블이 틀어짐, 때문에 tr을 display: table로 변경하는데

 ** 그렇게 수정하게 되면 colgroup 작동 안함 )

 

결과적으로는 테이블 태그로 구조를 짜는 의미가 없어보여서

(그렇게 할거 같으면 다른 태그를 쓸거같음..)

 

테이블구조를 유지하면서 스크롤을 할 수 있는 방법을 찾아보았다.

 

 

1. 방법

** 테이블을 감싸는 div에 스크롤 기능을 넣는다.

<div class="scroll">
    <table></table>
</div>

 

 

 

** 스크롤 css로 overflow: auto를 넣고 최대 높이값을 지정한다. 

(높이값에 도달 전에는 스크롤이 없다가 높이값에 도달하면 스크롤 생성)

.scroll{
    border: 1px solid #C9C9C9;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 320px;
}

 

 

** 스크롤시  thead를 고정하기 위해 sticky를 준다. 

thead{
    position: sticky;
    top: 0;                      //상단에 고정
    border-bottom: 1px solid #CDCDCD;  //하단에 라인
    z-index: 5;                  //tbody 보다 위에 위치
}

 

 

** 스크롤시  thead에 라인이 고정되지 않는 걸 발견!!

 

border-collapse는 테이블 분리 여부를 확인하는 속성.

디폴트인 separate(분리)는 모든 셀이 테두리를 가지고 있어 인접하는 셀부분은 두껍게 보인다.  

collapse(상쇄) 인접하는 셀이 합쳐져 모든 셀이 1px로 동일하게 보인다.

 

** border-collapse: collapse; 셀이 하나로 합쳐져서 스크롤할 때 선이 딸려 올라가 안보이는 현상같다.

table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

 

참조:

https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element

 

 

 

 

 

 

*   *   *   *   *

 

 

tbody만 스크롤이 생기게 하고 싶어서 찾아봤더니 이중테이블로 만드는 방법을 보았다.

그렇다면 이중테이블로 만들지 않고 그냥 테이블을 두개로 쪼개 만들어도 되지 않을까

 

2.  방법

 

** thead가 있는 table과 tbody가 있는 table로 나눈다.

** tbody가 있는 table을 div를 감싸고 scroll 기능을 넣는다.

<div>
    <table>
    	<thead></thead>
    </table>
    
    <div class="scroll">
        <table>
            <tbody></tbody>
        </table>
    </div>
</div>

 

 

 

** 1.방법과 동일하게 스크롤 css로 overflow: auto를 넣고 최대 높이값을 지정한다. 

 

** thead은 스크롤이 없기에  기능을 넣을 필요 없다.