JavaScript를 사용하여 스크롤 테이블의 첫 번째 행과 첫 번째 열을 잠그는 방법

다음 경우에 테이블의 첫 번째 행과 첫 번째 열을 잠그는 방법 스크롤은 상단과 왼쪽에 중요한 정보가 있는 큰 테이블의 경우 유용한 기능이 될 수 있습니다. CSS만으로는 이를 달성할 수 없지만 JavaScript는 솔루션을 제공합니다.

fxdHdrCol 플러그인을 잠재적인 JavaScript 솔루션으로 고려하세요. 이 플러그인은 표준 HTML 테이블을 고정된 테이블 헤더와 열이 있는 스크롤 가능한 테이블로 변환합니다. 첫 번째 행과 첫 번째 열을 그대로 유지하면서 테이블을 가로 및 세로로 스크롤할 수 있습니다.

fxdHdrCol을 사용하려면 다음 매개변수를 플러그인에 전달하기만 하면 됩니다.

$('#myTable').fxdHdrCol({
    fixedCols    : 3,       /* 3 fixed columns */
    width        : "100%",  /* set the width of the container (fixed or percentage)*/
    height       : 500      /* set the height of the container */
});

fixedCols 매개변수를 지정하면 테이블의 고정 열 수를 정의할 수 있습니다. 테이블에 맞게 컨테이너의 너비와 높이를 설정할 수도 있습니다.

전체 데모 및 문서를 보려면 원래 응답에 제공된 링크를 참조하세요. 이 솔루션은 테이블의 첫 번째 행과 첫 번째 열을 효과적으로 잠가서 더욱 사용자 친화적인 스크롤 환경을 제공합니다.