如何将 Tabulator 表适合固定高度和宽度的 div？
[英]How to fit a Tabulator table to a div of fixed height and width?
问题描述
I am trying to create a Tabulator table inside a div that has fixed height and width.
我正在尝试在具有固定高度和宽度的 div 内创建一个 Tabulator 表。
However, if there is not enough columns/rows of data to fill the entire width or height of the div, the Tabulator table will still occupy the entire height/width, only filling grey color in the free space.但是，如果没有足够的列/行数据来填充 div 的整个宽度或高度，Tabulator 表格仍然会占据整个高度/宽度，仅在空闲空间中填充灰色。
How can I get rid of this grey area?我怎样才能摆脱这个灰色地带？ Note that I do not want to resize rows nor columns.请注意，我不想调整行或列的大小。
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>
3 个解决方案
解决方案1
3 已采纳 2019-12-24 11:56:09
At the moment you have one of two display options for the table:目前，您有表格的两个显示选项之一：
- If you specify a height on the table it will take up that height and any overflow will be managed correctly and allow scrolling, if there are not enough rows to fill the table it still takes up the same amount of space and you see the table background如果您在表格上指定一个高度，它将占用该高度，并且任何溢出都将得到正确管理并允许滚动，如果没有足够的行来填充表格，它仍然占用相同数量的空间并且您会看到表格背景
- If you don't specify a height on the table it assumes that you want it to take up as much height as there are rows and that the external div to the table will handle scrolling如果您没有在表格上指定高度，则假定您希望它占用与行数一样多的高度，并且表格的外部 div 将处理滚动
So in your scenario you could look at changing the background color to make it fit in more, but there is no way to hid the extra space.因此，在您的场景中，您可以考虑更改背景颜色以使其更适合，但无法隐藏额外的空间。
In the upcoming version 4.6 (coming early 2020) there will be a new display mode that is a hybrid between the two, that will allow the table to expand until it overflows and then handle scrolling inside the table在即将到来的 4.6 版（2020 年初）中，将有一种新的显示模式，它是两者的混合体，允许表格展开直到溢出，然后处理表格内部的滚动
解决方案2
0 2019-10-22 12:50:58
I have changed height to max-height .我已将height更改为max-height 。 Does this solve your problem?这能解决你的问题吗？ No matter how many rows, the table will not occupy more than 200px in height.无论有多少行，表格的高度都不会超过200px 。
Have also added display: inline-block and max-width: 200px to adjust the containing div 's width.还添加了display: inline-block和max-width: 200px来调整包含div的宽度。 You can make the table scrollable in any or both directions once the table width and/or height reaches the maximum defined in it's containing 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>
解决方案3
0 2019-10-22 13:28:01
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/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.