HTML에서 테이블의 머리글 (위쪽과 왼쪽) 을 고정하고 스크롤합니다.
2984 단어 JavaScriptHTMLRubyRailsCSS
입문
고정표의 머리글 (위쪽과 왼쪽) 을 스크롤하는 설치에서 플러그인 등을 비교했기 때문에 비망록을 포함하고 싶습니다.
위치:stick 구현 방법
우선, 나는 대전제로 원래 사용
position:sticky
이 비교적 좋다고 생각한다.이쪽의 보도는 매우 이해하기 쉽다.
https://qiita.com/s0tter/items/14fb4ec2600828a21a22
CSS에서만 끝나기 때문에 상술한 방법이 우선이라고 생각하지만 2019년 7월 7일까지는 IE를 지원하지 않습니다.IE 사용자도 응용 프로그램을 사용할 수 있으므로 사용을 미루도록 허락해 주십시오.
https://caniuse.com/#search=position%3A%20sticky
위치: 빠른 응답

가능하다면
position:sticky
을 사용하고 싶지만 이번에는 IE 관계로 사용하기 어려워서 아래의 플러그인 등을 비교했습니다.플러그인을 비교했습니다.
Mac에만 컴퓨터가 있기 때문에 VirtualBox에서 IE를 시작합니다.
동작 상태를 확인했습니다.
데이터 테이블
Github: https://github.com/DataTables/DataTables
https://datatables.net/extensions/fixedcolumns/examples/initialisation/two_columns.html
마지막 업데이트: 2018년 6월 23일
IE의 동작 상태

·fixedTblHdrLftCol
Github: https://github.com/nkmrshn/fixedTblHdrLftCol
http://nkmrshn.com/fixedTblHdrLftCol/samples/sample_3_sync.html
최종 업데이트: 2014년 6월 13일
IE의 동작 상태

・FixwdMidashi
http://hp.vector.co.jp/authors/VA056612/fixed_midashi/manual/index.html
마지막 업데이트: 2018년 12월 3일
IE의 동작 상태

・Grid
아직 정리 중입니다.
나는 IE 중에서 동작이 가장 아름다운 것이 Fixwd Midashi라고 생각한다.
다른 좋은 방법이 있다면 저에게 알려주세요.
조금만 추가해 주세요.
참고가 됐으면 좋겠어요.
Reference
이 문제에 관하여(HTML에서 테이블의 머리글 (위쪽과 왼쪽) 을 고정하고 스크롤합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Atsushi_/items/747c2615622b29eb2ca9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)