最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Setting maximum table height with Tabulator - Stack Overflow

programmeradmin1浏览0评论

The Tabulator library seems to support two modes for setting the table's height: an explicit value (which forces a "gray" area at the bottom if there are not enough rows in the data set; and a vertical scrollbar if their are too many rows), or an automatic mode (the height is adjusted to fit the actual data, no scrollbar is created).

It is possible to use a maximum height, so that a vertical scrollbar appears if needed, but otherwise the height is adjusted to the content?

The Tabulator library seems to support two modes for setting the table's height: an explicit value (which forces a "gray" area at the bottom if there are not enough rows in the data set; and a vertical scrollbar if their are too many rows), or an automatic mode (the height is adjusted to fit the actual data, no scrollbar is created).

It is possible to use a maximum height, so that a vertical scrollbar appears if needed, but otherwise the height is adjusted to the content?

Share Improve this question edited Sep 5, 2020 at 16:55 Oli Folkerd 8,3981 gold badge26 silver badges58 bronze badges asked Jan 14, 2019 at 9:17 Alain FrischAlain Frisch 2494 silver badges7 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5

There is nothing really documented about this. However I found that assigning a max-height to the .tabulator-tableHolder class gets the job done.

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

Please note that this disables the virtual DOM, which will be a performance hit if you have many rows.

As of version 4.6 you can now set a maximum height on the table using the maxHeight property in the table constructor object:

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

Doing it this way will also improve render efficiency as the table will engage the virtual DOM when it exceeds the height of its parent element, reducing the loading time of the page

Full details can be found in the Variable Height Tables Documentation

发布评论

评论列表(0)

  1. 暂无评论