HTML/CSS - 테이블 헤더, 컬럼 고정 후 스크롤 (Scroll table fixed th, column) > jquery

현재 다니고 있는 회사는 텍스트 데이터를 나열할 일이 많아 테이블을 자주 씁니다.

그런데 이 데이터 내용이 늘 추가되어야 하는 상황이라면 페이지 세로 길이가 얼마만큼 늘어날지 모르기 때문에 테이블 영역만의 스크롤을 만들어달란 요청을 받습니다.

네 스크롤을 만드는 것 자체는 아주 간단합니다.

table에 div를 감싸 고정 height를 설정 한 후 overflow는 scroll로 처리하면 되니깐요!

머리를 고정시켜주세요

위의 작성한 테이블은 내용이 갖는 특징이 저마다 달라 각 열의 제목들을 보고 스크롤을 계속 아래로 내려도 무슨 제목에 대한 내용인지 이해하기 어렵지 않습니다.

그러나 이런 경우라면 어떨까요?

저희 회사같은 경우는 이자율, 수수료율 등 퍼센트를 많이 쓰는데요.

차이가 얼마 나지 않는 비율이 연속적으로 나열될 경우(예를 들면 3%, 5%, 2.5% 식으로) 스크롤을 내릴수록 무슨 제목에 해당하는 내용인지 헷갈리는 상황이 자주 발생하곤 합니다.

실제로 만든 직후 제목들을 고정시켜달라는 요청이 들어왔었죠.

th들이 묶인 tr에 fixed_top이라는 클래스를 추가하고

fixed_top을 display를 이용하여 하나의 테이블로 바꿔준 후, position:absolute를 이용하여 상단에 고정시켜준 후 absolute로 인해 초기화된 넓이를 재설정해줍니다.

absolute를 사용했으니 table 내의 tr들은 fixed_top의 높이를 인식하지 못하고 밀려 올라올 것입니다.

밀려올라오는 tr들의 위치를 잡아주기 위해 tb_wrap이라는 div에 padding-top을 추가하여 제어해줍니다.

열 고정, 느껴본 적 있어?

이렇게 헤더 행까지 고정하면 저는 훌륭한 역할을 수행하는 테이블이라고 생각합니다.

그런데 우리 사이트가 반응형이라면 어떻게 될까요?

아주 간단한 방법이 있습니다. 실제로 많이 쓰이기도 하는 방법이구요.

중요도가 낮은 정보의 열을 display:none으로 처리한 후 최소한의 정보만 보여주는 표로 바꾸는 것이죠.

그런데 중요도가 낮은 정보가 없다? 모두 보여줘야 한다?

그렇다면 우린 눈물을 머금고 다른 방법을 생각해내야겠죠.

저는 CSS로는 한계가 있다 생각하여 jQuery의 도움을 받기로 했습니다.

** 개발자 도구를 열어 모바일 사이즈에서 확인해보세요!

제가 생각해본 작동원리는 첫번째 열이 고정된 채로 있고 가로 스크롤을 움직일때 마다 두번째 열을 스크롤 값에 따라 움직이는 것이었습니다. 그럼 우리가 현재 어느 항목의 무슨 내용을 보고있는 지 이해하기도 쉬워지겠죠?

그러므로

1. absolute 상태인 fixed_top은 스크롤 값을 부여해 transform:translateX로 해당 tr 전체를 이동시킬 것

2. 고정이 될 기준값은 제가 스크롤을 어떻게 움직이든 div의 위치는 변하지 않을테니 div의 좌측 좌표값을 잡고

3. 움직이게 할 값은 스크롤 값이 매번 변할테니 스크롤 값을 기준으로 잡았습니다.

미디어쿼리 분기점을 기준으로 스크립트가 작동할 분기점을 지정하고,

스크롤 이벤트가 발생할 경우 그리고 그 스크롤이 시작하는 시점까지 스크립트를 만들어봤습니다.

작업물에 성공적으로 녹여내셨으면 하나씩 뜯어보시면서 작동원리를 한번 익혀보세요!

에필로그

학원에서는 테이블이 사장되는 추세라 하여 테이블 레이아웃은 div, ul, li 로 만들라 배웠는데, 첫 실무에선 데이터가 나열되는건 table을 써달라 하여 한동안 애를 많이 먹었습니다.

헤더 고정 테이블을 만들겠다고 div 2개로 나눠 각각 thead, tbody 용으로 만들어 썼던 적도 있었는데, 문득 최근에서야 scope라는 개념을 알게되고 작업해왔던게 문제가 있었다 판단하여 아래에 링크한 레퍼런스들을 기반으로 그간 작업물을 수정하고 더 많이 배웠습니다.

요즘 제가 위치한 포지션에서 잘 보이게 하는것과 움직임을 구현하는 것을 작성하는건 어렵지 않다고 생각합니다. 어떠한 가이드라인이 없다면요.

퍼블리셔로 일하면서 느낀건 우리가 최신 트렌드를 접하고, 어떤 방향을 가더라도 늘 고려해야할 사안은 웹표준성과 웹접근성이라 생각합니다.

이것이 뒷받침되지 않는다면 언제 무너질지 모르는 건물을 겉만 번지르르하게 지어놓는 것과 다름 없지 않을까요.

위의 예제는 제가 아는 선에선 표준성과 접근성에 위배되는게 없다 생각하지만 혹시 지금 보시는 분이 더 올바르게 알고계시다면 댓글로 남겨주세요! 감사합니다!