使用 Tabulator 設置最大桌子高度

Question

Tabulator 庫似乎支持兩種設置表格高度的模式：一個顯式值（如果數據集中沒有足夠的行，它會在底部強制一個“灰色”區域；如果行數太多，則使用垂直滾動條），或自動模式（調整高度以適合實際數據，不創建滾動條）。

可以使用最大高度，以便在需要時出現垂直滾動條，否則高度會根據內容進行調整？

Answer 1

沒有任何關於這一點的真正記錄。 但是我發現將 max-height 分配給 .tabulator-tableHolder 類可以完成工作。

.tabulator-tableHolder {
  max-height: 100px !important;
}

請注意，這會禁用虛擬 DOM，如果您有很多行，這將影響性能。

Answer 2

從 4.6 版開始，您現在可以使用 table 構造函數對象中的maxHeight屬性在 table 上設置最大高度：

var table = new Tabulator("#example-table", {
    maxHeight:"100%", //do not let table get bigger than the height of its parent element
});

這樣做還可以提高渲染效率，因為當表格超過其父元素的高度時，它會參與虛擬 DOM，從而減少頁面的加載時間