如何建立具有水平和垂直捲軸的固定標題表格？

修復了帶有水平滾動條和垂直滾動條的標題表

問題：

建立一個當需要兩個捲軸時，具有水平和垂直捲軸的固定標題表可能具有挑戰性。當外部容器絕對定位時會出現此問題，這可能會導致垂直滾動條幹擾標題，從而阻止其固定到位。

HTML:

HTML結構比較simple:

<div class="outer-container">
  <div class="inner-container">
    <div class="table-header">...</div>
    <div class="table-body">...</div>
  </div>
</div>

CSS:

CSS樣式絕對定位外部容器並處理溢出的內容：

.outer-container {
  position: absolute;
  overflow: hidden;
}

.inner-container {
  overflow-x: scroll;
}

.table-header {
  position: absolute;
  width: 100%;
}

.table-body {
  overflow-y: scroll;
  height: calc(100% - 40px); /* Adjust this value to match the height of the header */
}

解決方案：

解決這個問題的關鍵是處理滾動表頭和表體同步。這是一個可能的解決方案：

1. 將 .table-header 的位置設為絕對位置。這將使其保持在 .inner-container 中的位置。
2. 向 .table-body 新增滾動事件偵聽器。
3. 在事件處理程序中，設定 .table- 的左偏移量header 到 .table-body 水平滾動位置的負數。這將使標題隨著正文水平滾動而移動。

JavaScript/jQuery:

以下腳本可用於實現滾動同步：

$(".table-body").scroll(function() {
  $(".table-header").offset({ left: -this.scrollLeft });
});

解釋：

此腳本確保當使用者水平滾動.table-body時，.table-header 隨之滾動，維持其固定不變

注意：

調整CSS 中.table-body 的height 屬性以匹配.table- header 的高度。這將防止正文溢出到標題上。

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