如何實現具有水平和垂直捲軸的固定表頭表格？

固定在帶有水平捲軸和垂直捲軸的標題表

當您將垂直滾動條添加到固定捲軸時，就會出現您遇到的問題頭表。垂直滾動條會幹擾水平捲軸的位置，因為兩者在外部容器內的空間上存在衝突。

HTML 和 CSS 結構

您提供的 HTML 和 CSS結構是一個很好的起點。 HTML 由表格的巢狀結構組成，標題表格設定為固定定位，主體表格設定為溢出-y：捲動。 CSS 定義了表格元素的樣式，包括標題單元格和正文單元格的固定高度和寬度。

解決方案

解決該問題並同時具有水平和水平方向垂直滾動條工作正常，我們可以結合使用 CSS和JavaScript:

1. CSS:

   • 刪除溢位-x:捲動； .inner-container 的屬性。
   • 為 .inner-container 新增一個具有特定寬度的類，例如「scroll-container」。

2. JavaScript：

   • 使用JavaScript 來計算.scroll-container 的寬度並將.table-body 的寬度並將.table-body 的寬度設定為該寬度。這可確保正文表格具有正確的寬度，以與標題表格對齊並防止水平捲軸問題。

範例程式碼

這是更新後的範例程式碼：

/* CSS */
.scroll-container {
  width: 100%;
}

/* JavaScript */
var scrollContainer = document.querySelector(".scroll-container");
var tableBody = document.querySelector(".table-body");
tableBody.style.width = scrollContainer.offsetWidth + "px";

解釋

透過從.inner-container中刪除overflow-x屬性並透過JavaScript設定特定寬度，我們確保.table-body 具有正確的寬度以適應水平和垂直滾動。這種對齊方式可以防止垂直滾動條幹擾水平滾動條，並允許兩者正常工作。

替代解決方案

此外，您還可以考慮其他解決方案：

• 使用CSS Grid 或Flexbox 進行佈局，以實現🎜>
使用CSS Grid 或Flexbox 進行佈局，以實現🎜>
• 使用CSS Grid 或Flexbox 進行佈局，以實現🎜>
使用CSS Grid 或Flexbox 進行佈局，以實現🎜>

使用CSS Grid 或Flexbox 進行佈局，以實現更加靈活和響應式設計。 探索使用 Bootstrap 或 Materialize 等 CSS 函式庫，它們提供了可以簡化此功能實現的預先建置元件和樣式。

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