如何使用 HTML、CSS 和 JavaScript 為表格建立雙水平捲軸（頂部和底部）？

在表格的頂部和底部創建水平滾動條

如果大表格超出可見的瀏覽器窗口，通常需要有滾動條在頂部和底部有效地導航整個表格內容。

在純 HTML 和 CSS 中，這可以透過模擬來實現頂部的第二個水平捲軸。操作方法如下：

1. 建立一個虛擬Div：

   在表格上方新增一個div 元素，並設定其高度足以建立外觀捲軸（例如， 20px)。

2. 停用垂直捲動：

   為虛擬 div 和表格的父親 div 設定溢位-y:隱藏以限制滾動到水平方向axis.

3. 啟用水平滾動：

   設定overflow-x：滾動虛擬di v和表格的父div以啟用水平滾動兩個都

4. 同步滾動條：

   透過將事件偵聽器附加到捲動事件，利用JavaScript 來同步虛擬 div 和表格的捲動。當一個滾動條移動時，另一個滾動條也會相應地調整。

這是一個將虛擬 div放在表格父級頂端的範例div:

HTML:

<div class="table-wrapper">
  <div class="dummy-scrollbar"></div>
  <div class="data-table">

CSS:

.table-wrapper {
  height: 130%;
  overflow: auto;
  width: 100%;
}

.dummy-scrollbar {
  height: 20px;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
}

.data-table {
  overflow-x: scroll;
  overflow-y: visible;
  width: 100%;
}

CSS:

$(".table-wrapper").scroll(function() {
  $(".dummy-scrollbar").scrollLeft($(this).scrollLeft());
});

$(".dummy-scrollbar").scroll(function() {
  $(".table-wrapper").scrollLeft($(this).scrollLeft());
});

JavaScript: 透過實作此方法，您可以建立桌面上有第二個水平捲軸的錯覺，增強了導覽和可訪問性。

以上是如何使用 HTML、CSS 和 JavaScript 為表格建立雙水平捲軸（頂部和底部）？的詳細內容。更多資訊請關注PHP中文網其他相關文章！