JavaScript와 CSS를 사용하여 표 행과 열을 고정하는 방법은 무엇입니까?

JavaScript와 CSS로 표 행과 열을 고정하는 방법

스크롤할 때 표의 첫 번째 행과 첫 번째 열을 잠글 수 있습니다. JavaScript와 CSS를 사용하여 Excel의 '고정 창' 기능을 시뮬레이션합니다.

JavaScript 솔루션

한 가지 JavaScript 솔루션은 두 개의 별도 테이블을 만드는 것입니다.

1. 첫 번째 행과 열 제목을 포함하는 고정 헤더 테이블.
2. 나머지 테이블 데이터를 포함하는 스크롤 가능한 본문 테이블.

두 테이블 모두 CSS를 사용하여 절대적으로 배치됩니다. 본문 테이블 위에 위치하는 고정 헤더 테이블. 페이지를 스크롤할 때 고정된 헤더는 고정된 채 본문 테이블은 독립적으로 움직입니다.

CSS 위치 지정

<code class="css">/* Fixed header table */
.fixed-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Scrollable body table */
.scrollable-body {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}</code>

JavaScript 활성화

<code class="javascript">// Create a table with the first row as the header
const table = document.createElement('table');
const headerRow = table.createTHead().insertRow();

// Create the first column headings
for (let i = 0; i <p>이 솔루션은 테이블에 완전한 기능을 갖춘 "창 고정" 효과를 제공하여 스크롤하는 동안 첫 번째 행과 열이 계속 표시되도록 합니다.</p></code>

위 내용은 JavaScript와 CSS를 사용하여 표 행과 열을 고정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!