在 GitHub 上檢視

Table Sticky Header

Bootstrap Table 的吸頂表頭擴展，在滾動時將表格表頭固定在視口頂部。

本頁目錄

該擴展為表格提供了吸頂表頭功能，當頁面滾動時，表格表頭會固定在視口頂部，方便用戶在查看大量數據時始終能看到列標題。

用法

<link rel="stylesheet" href="extensions/sticky-header/bootstrap-table-sticky-header.css">
<script src="extensions/sticky-header/bootstrap-table-sticky-header.js"></script>

示例

Sticky Header

選項

  • 屬性: data-sticky-header

  • 類型: Boolean

  • 詳情:

    控制是否啟用吸頂表頭功能。設置為 true 時，表格表頭會在頁面滾動時固定在視口頂部。

  • 默認值: false

stickyHeaderOffsetLeft

  • 屬性: data-sticky-header-offset-left

  • 類型: Number

  • 詳情:

    設置吸頂容器的左側偏移量（單位：像素）。例如，當頁面 body 左側內邊距為 60px 時，可將該值設為 60，使吸頂表頭與頁面內容對齊。

  • 默認值: 0

stickyHeaderOffsetRight

  • 屬性: data-sticky-header-offset-right

  • 類型: Number

  • 詳情:

    設置吸頂容器的右側偏移量（單位：像素）。例如，當頁面 body 右側內邊距為 60px 時，可將該值設為 60，使吸頂表頭與頁面內容對齊。

  • 默認值: 0

stickyHeaderOffsetY

  • 屬性: data-sticky-header-offset-y

  • 類型: Number

  • 詳情:

    設置吸頂表頭距離窗口頂部的偏移量（單位：像素）。例如，當頁面存在高度為 60px 的固定導航欄時，可將該值設為 60，避免吸頂表頭被導航欄遮擋。

  • 默認值: 0