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