[ CSS + JS ] 좌우 스크롤이 가능한 테이블 만들기 (컬럼 고정)

반응형 웹에서 테이블 구조를 사용하는 경우에, 모바일 화면에서는 테이블의 구조가 무너지는 경험을 자주 했기 때문에 해결을 위해 브라우저의 폭이 줄어들었을 경우에는 좌우의 스크롤을 통해서 테이블을 확인할 수 있도록 구현할 수 있습니다. 

 

구현 방법은, 테이블을 두 개를 만들어서 하나의 테이블은 고정된 컬럼을 보여주기 위함 하나의 테이블은 스크롤을 통해서 보여질 테이블로써 사용합니다.

---

실제동작 확인

See the Pen Untitled by JONGIN CHOI (@jongin1004) on CodePen.

 

---

간단히 코드 설명

JS

const table_container = document.querySelector('#table-scroll');

const table       = document.querySelector('.table');
const table_clone = table.cloneNode(true);

table_clone.classList.add('clone');
table_container.appendChild(table_clone);

위에서도 설명했듯이, 두 개의 테이블이 필요하기 때문에 cloneNode를 이용해 같은 테이블을 복제하고 테이블을 감싸고 있는 요소에 추가하는 코드입니다. 

 

복제한 테이블은 고정된 컬럼 설정이라던가, visibility 처리등의 CSS를 적용하기 위해서 clone 이라는 class를 추가합니다. 

 

CSS

.table-scroll {
	position:relative;
	max-width: 600px;
	margin:auto;
	overflow:hidden;
	border-right:1px solid #707070;
}

.table-wrap {
	width: 100%;
	overflow: auto;
}

.clone {
	position:absolute;
	top:0;
	left:0;
	pointer-events:none;
}

.clone th, .clone td {
	visibility:hidden;
}

.clone .fixed-side {
	visibility:visible;
}

핵심적인 CSS만 설명하자면, 우선 테이블을 감싸고 있는 div의 최대 width를 정해둬서 테이블이 브라우저의 폭보다 커져서 레이아웃을 벗어나느 것을 막습니다. 

 

overflow를 hidden으로 함으로써 벗어나는 테이블의 크기는 보이지 않도록 합니다. 

table-wrap에서는 overflow를 auto로 하는데, auto로 하게되면 자동적으로 벗어나는 부분은 스크롤로 볼 수 있도록 만들어 줍니다.

 

clone 테이블은 기존 테이블을 감싸는 div를 기준으로 절대적인 위치에 고정시킵니다. 그래야지 clone의 컬럼은 고정되어 있고 기존의 테이블은 스크롤로써 볼 수 있게 됩니다. 

clone테이블은 맨 첫 고정할 컬럼을 제외하고는 사용하지 않을꺼기 때문에 전체적인 th와 td의 visibility를 hidden으로하고, fidxed-side만 visible로 합니다. 

 

 

구현했을 때, border 줄이 고정되어 남아있다던가, 배경색이 남아있는 경우

.clone td, .clone th {
	border-color:transparent;
    background:transparent;
}

transparent를 이용해서 투명하게 만들어주면 해결이 됩니다.