如何使用 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中文網其他相關文章！