테이블 헤더 고정, tbody 스크롤 남기기

순수 자바스크립트에서 (pure javascript tbody scroll) tbody에 스크롤을 주기 위해서는 간단히 아래의 2가지 방법이 있는 것 같다.

근데 실제로 만약 tbody에 스크롤을 주고 싶다면 당연히 scroll paging이 (스크롤 페이징)이 필요하게 되는데 굳이 table로 만들어서 뿌려줘야 할까?라는 고민이 생긴다.

나름 3일동안 아래의 3가지 출처에서 고민하다가 대충 잡게 되었는데 우선 기록을 위해서 남겨 둔다.

추후 이쁘게 정리 예정이다.

* table tbody에 스크롤 남기기

.TABLE thead{float:left; width:890px;}
.TABLE tbody{overflow-y:auto; overflow-x:hidden; float:left; width:890px; height:100px}
.TABLE tbody tr{display:table; width:890px;}
.TABLE td{width:100px}

출처 : [https://bulkywebdeveloper.tistory.com/18]

* div를 통해서 tbody에 스크롤 남기기

출처 : [https://velog.io/@kcarl/Tablefixedthcolumn]

* 스크롤 페이징 : getBoundingClientRect

설명 출처 : [https://youran.dev/lazyload-and-scrollpaging/]