가로, 세로 헤더 고정 테이블 - position:sticky

회사에서는 원래 테이블 헤더만 고정된 테이블을 사용했었는데,

최근 좌측 헤더 테이블도 고정 시켜 달라는 요구가 있었다.

하지만 구글에 검색해봐도 그런 형식의 테이블을 잘 사용하지 않는지 정보가 많이 없었다. ㅠㅠ

건진것은 오직 position:sticky 뿐..

 

평소 relative, absolute,static 가끔 fixed만 사용해봤던지라 처음 보는 css였다.

찾아보니 relative, absolute와 fixed 사이의 css효과라고 느껴졌다.

 

다양한 position 효과

relative	영역의 부모
absolute	영역의 자식, top과 left등으로 객체의 위치를 지정한다. 스크롤 시 위치가 변한다.
fixed	relative 영역의 영향을 받지 않고 브라우저의 영역에 영향을 받는다. top, left등으로 객체의 위치를 지정하지만 스크롤 시 위치가 변하지 않는다.
sticky	relative 영역의 영향을 받으며 top과 left등으로 객체의 위치를 지정한다. 부모의 영역 내에서는 위치가 변하지 않지만, 스크롤이 부모의 영역을 벗어나면 위치가 변한다.

 

이게 무슨 소리일까? 싶겟지만 sticky와 fixed의 확연한 차이를 알고 지나가야한다.

왜냐면 내가 그냥 했다가 오류가 났기 때문에...

 

테이블 퍼블리싱

테이블을 작성할 때 하나의 테이블 같지만 우린 네개의 테이블로 영역을 나누어 코드를 작성하면 된다.

 

먼저 위 사진처럼 한 객체 안에 상단 헤더 테이블과 하단 컨텐츠 테이블로 나눠준다.

 

후에 이렇게 상단에 두개, 하단에 두개의 테이블로 나눠 총 4개의 영역을 잡는다.

 

<div class="total_table_wrap">
	<!-- 상단 테이블 헤더 -->
	<div class="table_thead">
    	<div class="left_table">
        	<table></table>
        </div>
        <div class="right_table">
        	<table></table>
        </div>
    </div>
    
    <!-- 하단 테이블 콘텐츠| 상,하 스크롤 될 영역 -->
    <div class="table_tbody">
    	<div class="left_table">
        	<table></table>
        </div>
        <!-- 좌,우 스크롤 될 영역 -->
        <div class="right_table">
        	<table></table>
        </div>
    </div>
</div>

위와같이 헤더와 바디 div로 나누고 헤더와 바디 div안에 각각 왼쪽, 오른쪽 테이블로 나누어 작성하면 된다.

 

그 후 상하 스크롤 시 고정될 table_thead와 좌우 스크롤 시 고정될  left_table에 position:sticky를 준다.

 

그러면 짜잔! 하고 완성이 될 것 같았지만!!! 

stkcky의 속성 부모의 영역 내에서는 위치가 변하지 않지만, 스크롤이 부모의 영역을 벗어나면 위치가 변한다.

로 인해 테이블이 부모 영역을 벗어나면 left_table의 위치가 같이 움직였다..

 

해당 영역은 도저히 css로 width값을 잡기 힘들어서 깔끔하게 스크립트 사용~

document.addEventListener('DOMContentLoaded', function() {
    // 상하, 좌우 고정 스크롤 테이블
    let leftTableWidth = document.querySelector('.left_table table').offsetWidth;
    let rightTableWidth = document.querySelector('.right_table table').offsetWidth;
    let totalTableWidth = leftTableWidth + rightTableWidth;

    // 각 요소에 대해 width값 설정
    let elements = document.querySelectorAll('.table_thead, .table_tbody, .total_table_wrap');
    elements.forEach(function(element) {
        element.style.width = totalTableWidth + 'px';
    });

    // right_table 위치 및 최소 너비 설정
    let rightTables = document.querySelectorAll('.right_table');
    rightTables.forEach(function(element) {
        element.style.left = leftTableWidth + 'px';
        element.style.minWidth = 'calc(50% - ' + leftTableWidth + 'px)';
    });
});

 

보면 코드에 right_table 위치를 left를 사용하여 고정시키는데 우리 회사에서는 left th테이블이 값에 따라 수시로 바뀔 예정이라 스크립트로 right_table 위치를 잡아줬다.

 

하단은 완성본~

See the Pen 가로 세로 고정 테이블 by SIONS2 (@SIONS2) on CodePen.