如何建立具有固定標題和可滾動正文的 Bootstrap 3 表？

實作具有可捲動內容的表格固定標題

在本文中，我們將解決建立具有固定標題和可捲動內容的表格的挑戰使用Bootstrap 3 進行主體設計。探索的解決方案旨在在不影響外觀的情況下保留Bootstrap 的美感

挑戰

傳統的Bootstrap 表（如提供的範例所示）存在設定表體高度的問題。儘管將高度設為 10px，但結果保持不變。這個問題需要另一種方法。

有黏性定位的固定標題

一個簡單而有效的解決方案涉及利用 CSS 黏性定位。這種方法涉及分配位置：sticky；頂部：0；到表頭 (th) 元素，確保它們保持固定在表的頂部。以下是具體的實作：

在上面的程式碼中，我們建立了一個帶有tableFixHead 類別的容器，其中包含了Overflow: auto;使表格可捲動，並使用100px 的高度來定義可見部分。表頭元素被分配位置：sticky；頂部：0；使它們固定在可滾動區域的頂部。

這種方法在 Chrome、Firefox 和 Edge 等現代瀏覽器中有效。

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