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