테이블헤더고정2 [HTML]테이블 여러줄의 헤더 고정하는 방법 이전에 작성한 글 중에 css의 position: sticky를 이용하여 테이블의 헤더를 간단하게 고정하는 방법을 올린적이 있었다. 2020/05/18 - [Web-Front/HTML] - [HTML]테이블 헤더 고정하는 방법 [HTML]테이블 헤더 고정하는 방법 position: sticky를 활용해서 테이블의 헤더를 고정시키는 방법입니다. 이 방법이 좋은이유는 테이블이 가로스크롤에 대해서는 자연스럽게 스크롤되면서 세로스크롤에서는 헤더가 고정이 됩니다. usang0810.tistory.com 쉽지만 유용한 방법이라 괜찮았었는데 댓글중에 헤더에서 rowspan을 사용했을 때 문제가 발생하는 것 같아서 확인해 보았다. 실제로 테스트해보니 첫번째 헤더위에 두번재 헤더가 올라가면서 의도치 않은 문제가 발생한다.. 2021. 3. 4. [HTML]테이블 헤더 고정하는 방법 position: sticky를 활용해서 테이블의 헤더를 고정시키는 방법입니다. 이 방법이 좋은이유는 테이블이 가로스크롤에 대해서는 자연스럽게 스크롤되면서 세로스크롤에서는 헤더가 고정이 됩니다. 먼저 html코드의 큰 틀입니다. 1번헤더 2번헤더 3번헤더 4번헤더 5번헤더 그 다음은 핵심 css코드입니다. div크기를 table의 크기보다 작게 만들어준 것은 가로스크롤 시에도 어떻게 동작되는지 보여주기위해서 저렇게 만든 것입니다. #userListTable th에 position: sticky를 지정하고 꼭 top: 0으로 지정해줘야 헤더가 고정이 됩니다. top에 다른값을 주면 고정이 안됩니다. 그리고 배경색을 th에 지정해줘야 합니다. tr에 배경색을 지정해주면 tr은 고정되는것이 아니라 부자연스럽게.. 2020. 5. 18. 이전 1 다음
