如何將 Tabulator 表適合固定高度和寬度的 div？
[英]How to fit a Tabulator table to a div of fixed height and width?
問題描述
我正在嘗試在具有固定高度和寬度的 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>
3 個解決方案
解決方案1
3 已采納 2019-12-24 11:56:09
目前，您有表格的兩個顯示選項之一：
- 如果您在表格上指定一個高度，它將占用該高度，並且任何溢出都將得到正確管理並允許滾動，如果沒有足夠的行來填充表格，它仍然占用相同數量的空間並且您會看到表格背景
- 如果您沒有在表格上指定高度，則假定您希望它占用與行數一樣多的高度，並且表格的外部 div 將處理滾動
因此，在您的場景中，您可以考慮更改背景顏色以使其更適合，但無法隱藏額外的空間。
在即將到來的 4.6 版（2020 年初）中，將有一種新的顯示模式，它是兩者的混合體，允許表格展開直到溢出，然后處理表格內部的滾動
解決方案2
0 2019-10-22 12:50:58
我已將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>
解決方案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/
優化具有固定高度的div的寬度？ （即仍然適合文本的最小寬度）
[英]Optimizing the width of a div with a fixed height? (i.e. smallest width that will still fit the text)
如何計算內部有一些文本和固定寬度的div的高度
[英]how to calculate the height of a div with some text inside and a fixed width
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.