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 < numColumns; i++) {
  headerRow.appendChild(document.createElement('th')).innerHTML = 'Heading ' + (i + 1);
}

// Create the body of the table with the remaining data
const body = table.createTBody();
for (let i = 0; i < numRows; i++) {
  const row = body.insertRow();
  for (let j = 0; j < numColumns; j++) {
    row.appendChild(document.createElement('td')).innerHTML = 'Data ' + (i + 1) + ', ' + (j + 1);
  }
}

// Split the table into two: fixed header and scrollable body
const fixedHeader = table.cloneNode(true);
fixedHeader.tBodies[0].remove();

const scrollableBody = table.cloneNode(true);
fixedHeader.tHead.remove();

// Add the two tables to the page
document.body.appendChild(fixedHeader);
document.body.appendChild(scrollableBody);

// Position the tables using CSS
fixedHeader.classList.add('fixed-header');
scrollableBody.classList.add('scrollable-body');</code>

이 솔루션은 테이블에 완전한 기능을 갖춘 "창 고정" 효과를 제공하여 스크롤하는 동안 첫 번째 행과 열이 계속 표시되도록 합니다.

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