如何将 Tabulator 表适合固定高度和宽度的 div？

Question

我正在尝试在具有固定高度和宽度的 div 内创建一个 Tabulator 表。

但是，如果没有足够的列/行数据来填充 div 的整个宽度或高度，Tabulator 表格仍然会占据整个高度/宽度，仅在空闲空间中填充灰色。

我怎样才能摆脱这个灰色地带？ 请注意，我不想调整行或列的大小。

 function create_table() { let table = new Tabulator("#table", { data: [ {name: 'John', surname: 'Miller'}, {name: 'Mike', surname: 'Tyson'}, ], columns:[ {title: 'Name', field: 'name'}, {title: 'Surname', field: 'surname'}, ] }) } create_table()

 #table { height: 200px; width: 200px; }

 <:DOCTYPE HTML> <html> <head> <.-- Tabulator --> <link href="https.//unpkg.com/tabulator-tables@4.2.7/dist/css/tabulator:min.css" rel="stylesheet"> <script type="text/javascript" src="https.//unpkg.com/tabulator-tables@4.2.7/dist/js/tabulator.min.js"></script> </head> <body> <div id="table"></div> </body> </html>

Answer 1

目前，您有表格的两个显示选项之一：

如果您在表格上指定一个高度，它将占用该高度，并且任何溢出都将得到正确管理并允许滚动，如果没有足够的行来填充表格，它仍然占用相同数量的空间并且您会看到表格背景
如果您没有在表格上指定高度，则假定您希望它占用与行数一样多的高度，并且表格的外部 div 将处理滚动

因此，在您的场景中，您可以考虑更改背景颜色以使其更适合，但无法隐藏额外的空间。

在即将到来的 4.6 版（2020 年初）中，将有一种新的显示模式，它是两者的混合体，允许表格展开直到溢出，然后处理表格内部的滚动

Answer 2

我已将height更改为max-height 。 这能解决你的问题吗？ 无论有多少行，表格的高度都不会超过200px 。

还添加了display: inline-block和max-width: 200px来调整包含div的宽度。 一旦表格的宽度和/或高度达到它包含的div中定义的最大值，您就可以使表格在任何方向或双向滚动。

 function create_table() { let table = new Tabulator("#table", { data: [ {name: 'John', surname: 'Miller'}, {name: 'Mike', surname: 'Tyson'}, ], columns:[ {title: 'Name', field: 'name'}, {title: 'Surname', field: 'surname'}, ] }) } create_table()

 #table { display: inline-block; max-height: 200px; max-width: 200px; }

 <:DOCTYPE HTML> <html> <head> <.-- Tabulator --> <link href="https.//unpkg.com/tabulator-tables@4.2.7/dist/css/tabulator:min.css" rel="stylesheet"> <script type="text/javascript" src="https.//unpkg.com/tabulator-tables@4.2.7/dist/js/tabulator.min.js"></script> </head> <body> <div id="table"></div> </body> </html>

Answer 3

 ar selectedCount = function() { var selectedRows = $("#example-table").tabulator("getSelectedRows").length; $('#rowCount').text(selectedRows); } $("#example-table").tabulator({ height: 205, layout: "fitColumns", //fit columns to width of table (optional) columns: [ {title: 'Name', field: 'name'}, {title: 'Surname', field: 'surname'} ], }); var tabledata = [ {name: 'John', surname: 'Miller'}, {name: 'Mike', surname: 'Tyson'}, ]; //load sample data into the table $("#example-table").tabulator("setData", tabledata); selectedCount();

 <div id="example-table"></div> <p> Number of selected rows = <span id="rowCount"></span> </p>

As per my understanding, Please check the documentation provided to make the 
columns to fit for the parent container http://tabulator.info/examples/4.4?#fittowidth


Please check the working example in the following https://jsfiddle.net/gzx72ukh/

如何将 Tabulator 表适合固定高度和宽度的 div？

问题描述

3 个解决方案

解决方案1
3 已采纳 2019-12-24 11:56:09

解决方案2
0 2019-10-22 12:50:58

解决方案3
0 2019-10-22 13:28:01

如何将 Tabulator 表适合固定高度和宽度的 div？

问题描述

3 个解决方案

解决方案1 3 已采纳 2019-12-24 11:56:09

解决方案2 0 2019-10-22 12:50:58

解决方案3 0 2019-10-22 13:28:01

解决方案1
3 已采纳 2019-12-24 11:56:09

解决方案2
0 2019-10-22 12:50:58

解决方案3
0 2019-10-22 13:28:01