최근에 프로젝트 통계를 할 때 특정 요구 사항이 발생하여 위아래로 스크롤 할 때 테이블을 수정해야합니다. 왼쪽과 오른쪽으로 스크롤하면 테이블이 테이블의 첫 번째 열에 고정되며 테이블의 첫 번째 열의 마지막 열은 고정됩니다.
렌더링을 먼저 배치하는 것이 더 명확 할 수 있습니다.
왼쪽과 오른쪽으로 스크롤하면 두 열이 고정되고 헤드와 테일의 중간 부분이 그에 따라 스크롤됩니다.
위아래로 스크롤하면 머리와 꼬리가 고정되고 첫 번째 열 및 마지막 열의 중간 부분이 그에 따라 스크롤됩니다.
아이디어 :오랫동안 생각한 후, 나는 단순히 테이블을 사용하면 기본적으로 달성하기가 어렵다는 것을 알았으며 위아래로 스크롤 할 때 충돌하는 장소가 있습니다. 마지막으로, 나는 DIV 레이아웃을 사용하고 테이블 디자인을 모방 하여이 효과를 달성하기 위해 마음을 바꿨습니다.
해결하다: 1. 전체 레이아웃 : 상부, 중간 및 하부, 즉 헤더, 바디 및 바닥 글의 세 부분으로 나뉩니다. 몸은 단단합니다. 위아래로 스크롤을 구현하십시오. 매우 간단하지 않습니까? 하하. 2. 헤더 레이아웃 : 왼쪽 컨테이너로 나뉘어 왼쪽 너비가 왼쪽으로, 컨테이너 80% 너비가 왼쪽, 오른쪽 10% 너비가 왼쪽으로 떠납니다. 데이터 열병의 실제 폭이있는 컨테이너를 추가하십시오 (상대 위치).3. 바디, 바닥 글 및 헤더.
4. Control Core : 컨테이너와 동일한 너비를 가진 (80%) DIV를 생성하고 열병과 같은 실제 데이터 너비 (예 : id = scroll)를 가진 div를 배치합니다. 왼쪽 및 오른쪽 스크롤 막대를 시뮬레이션합니다.
JavaScript 코드는 컨텐츠를 클립 보드에 복사합니다