如何實作HTML表格的固定表頭和固定列？

在HTML 表格中實作固定標題和固定欄位

在Web 開發中，當需要捲動時顯示大型HTML 表格可能具有挑戰性保持重要資訊的可見性。幸運的是，CSS 和 JavaScript 技術的組合可以提供一種解決方案，即固定螢幕頂部的列標題並在滾動表格資料時保持第一列固定。

一種有效的方法在工作範例中示範的是使用 CSS 屬性position:sticky 將列標題固定到位。透過將此屬性設為 top，滾動時標題將在螢幕頂部保持可見。

要修復第一列，可以使用 JavaScript 外掛程式「stickyTableHeaders」。該插件創建第一列內容的克隆，並使用 CSS 技巧將其定位以實現所需的固定效果。

以下是如何實現此功能的範例：

<code class="html"><table id="myTable">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- Table data -->
  </tbody>
</table></code>

<code class="css">#myTable {
  width: 100%;
  border-collapse: collapse;
}

#myTable thead {
  position: sticky;
  top: 0;
}</code>

<code class="javascript">// Use the stickyTableHeaders plugin to fix the first column
$('#myTable').stickyTableHeaders();</code>

透過結合這些技術，您可以建立具有固定標題和固定列的HTML 表格，確保滾動期間基本資訊保持可見。

以上是如何實作HTML表格的固定表頭和固定列？的詳細內容。更多資訊請關注PHP中文網其他相關文章！