如何建立具有固定標題的可捲動 HTML 表格？

如何在可捲動HTML 表格中錨定標題

合併固定表格標題和可捲動表格主體可能是Web 應用程式中的常見要求。然而，找到有效的解決方案可能具有挑戰性。本指南將探討此問題的解決方案，引導您完成實施。

解決方案

要實現此功能，您可以結合使用 CSS 和 JavaScript技術。一種流行的解決方案是採用一種稱為雙滾動的技術。這涉及到建立兩個巢狀表格：一個包含固定標題的外部表格和一個用於表格主體的可捲動內部表格。

CSS 設定

首先，定義CSS 樣式針對表格：

/* Outer table (fixed header) */
#outer-table {
  width: 100%;
  height: 100px; /* Set a fixed height for the header */
  overflow: hidden;
}

/* Inner table (scrollable body) */
#inner-table {
  height: calc(100% - 100px); /* Calculate the height based on the outer table's height */
  overflow-y: scroll;
}

Java >接下來，使用JavaScript動態調整內表的高度：

範例

const outerTable = document.getElementById('outer-table');
const innerTable = document.getElementById('inner-table');

// Calculate the inner table's height based on the outer table's height
innerTable.style.height = `${outerTable.clientHeight - 100}px`;

有關工作範例，請參閱以下程式碼範例：

此解決方案有效地凍結了表頭，同時允許桌體滾動順暢。透過實作這些技術，您可以建立滿足您的特定要求的響應式和互動式表格。

以上是如何建立具有固定標題的可捲動 HTML 表格？的詳細內容。更多資訊請關注PHP中文網其他相關文章！