HTML과 CSS만 사용하여 테이블 상단에 두 번째 수평 스크롤 막대를 만들 수 있습니까?

테이블 상단에 두 번째 수평 스크롤바 모방

문제:

수평 스크롤바를 사용하여 대규모 테이블 강화 하단의 스크롤바가 필요합니다. 그러나 이 스크롤바를 상단에 복제하는 것도 필요합니다. HTML과 CSS만으로 이 작업을 수행할 수 있습니까?

해결책:

"더미" div를 활용하면 요소 위에 두 번째 가로 스크롤 막대가 시뮬레이션됩니다. 기본 요소 바로 위에 위치하는 이 더미 div의 크기는 스크롤 막대를 수용할 수 있을 만큼 충분합니다. 더미 요소와 기본 요소 모두에 이벤트 핸들러를 연결하면 두 스크롤 막대 중 하나를 사용할 때 동기화가 보장됩니다. 더미 div는 두 번째 상단 스크롤 막대의 모양과 기능을 복제합니다.

실시간 예:

실용적인 방법을 위해 이 바이올린을 살펴보세요. 데모.

코드:

HTML:

CSS:

JS:

위 내용은 HTML과 CSS만 사용하여 테이블 상단에 두 번째 수평 스크롤 막대를 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!