table 상하좌우 스크롤(슬라이딩)시 특정 부분 위치 고정

원문 : https://www.codingfactory.net/13033

 

예전에는 자바스크립트로 프로그래밍 해 주던 영역인데,

position:sticky 속성을 지원하는 CSS 에서는

간단하게 구현이 됩니다.

 

원문에서는 하나의 테이블에 대해서만 다루었는데,

위 아래로 여러 테이블이 있는 경우에는

id 가 아니라 class 방식으로 바꾸면 정상 작동합니다.

 

 

 

---

그러면, 이제 응용편을 하나 예로 들어 봅니다.

좌우 스크롤이 되는 table 인데..

(물론, table 을 감싸는 div 에 overflow-y:hidden 적용)

상단 칼럼은 colspan 으로 셀병합(엑셀 용어.. ㅋ)되어 있고,

칼럼이 많아서 좌우 스크롤 해야 하는데..

상단 칼럼의 내용이 스크롤 할 때 계속 보여져야 한다면...?

간소하게 아래와 같은 HTML 구조라 하면..

(다른 구조는 생략하고, 아래 table 구조에만 집중..)

 

<table>

 <thead>

  <tr>

   <td colspan="5"><span>칼럼1</span></td>

   <td colspan="5"><span>칼럼2</span></td>

   <td colspan="5"><span>칼럼3</span></td>

  </tr>

 </thead>

 <tbody>

  <tr>

   <td>111</td>

   <td>222</td>

   <td>333</td>

   <td>444</td>

   <td>555</td>

   <td>666</td>

   <td>777</td>

   <td>888</td>

   <td>999</td>

   <td>000</td>

   <td>111</td>

   <td>222</td>

   <td>333</td>

   <td>444</td>

   <td>555</td>

  </tr>

 </tbody>

</table>

 

스타일을 어떻게 먹여야 할까..?

물론, span 은 td(th 라 해도 상관 없음) 안에서

가운데에 표시되도록 세팅되어 있다 생각하자.

table thead td span { position:sticky }

 

위와 같이 해서는 sticky 가 작동하지 않으니까..

상기 원문에서 보여준 대로 left:0 를 적용하여

table thead td span { position:sticky; left:0 }

라고 하면..

오른쪽으로 스크롤 할 때는 오른쪽 경계까지 밀려와서 달라붙긴 하지만,

왼쪽으로 스크롤 할 때는 왼쪽 경계로 밀려와서 벽에 달라붙지 않는다..

어떻게 해야 할까..? 답은, right 도 0으로 세팅.

table thead td span { position:sticky; left:0; right:0 }

이제 생각한 대로, 왼쪽과 오른쪽으로 스크롤 할 때..

잘 달라 붙어 준다.

left:0 나 right:0 대신 left:10px 이나 right:10px 과 같이 해도 되지만..

조금은 아쉽게 동작하므로, 여백을 주려면..

span 에 padding 이나 margin 을 주는 것이 맞음.