고정 열과 행 div 틀고정 css position sticky

고정된 열과 행을 어떻게 만들어낼까 고민이 많았는데, 아래와 같이 작업했다. 데이터가져와서 계속 새로 만들어야해서 결국 프로젝트에 적용한 버전은 약간 달라졌지만, 기본은 같다. css position sticky를 사용한 점.

 

 

See the Pen frozen rows and columns 3 : before :after by keepgoing-Noah (@keepgoing-noah) on CodePen.

 

js는 임시로 가짜 데이터를 만드느라 코드는 막무가내로 복붙했다. 왼쪽 행이 수십개가 될 수도 있고, 몇개 안될수도 있다.  현재 시간 기준으로 데이터를 불러오기 때문에, 지금 시간이 몇시냐에 따라서 column의 수도 달라진다.

 

일단 나중에 또 이것을 참고할 날이 올지 안올지는 모르지만... 일단 메모!!!

 

참고했던 사이트 : https://www.ofcodeandcolor.com/2021/09/05/styling-tables-sticky-rows-and-columns/

Styling HTML tables: frozen rows and columns