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

【问题标题】：How to fit a Tabulator table to a div of fixed height and width?如何将 Tabulator 表适合固定高度和宽度的 div？
【发布时间】：2019-10-22 11:27:17
【问题描述】：

我正在尝试在具有固定高度和宽度的 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>

【问题讨论】：

使用这种方法，如果我们有 100 行，那么溢出的行将被隐藏。并且不要尝试设置溢出：滚动，因为您将失去 virtualDOM 的优势并且所有内容都将立即呈现，这会使浏览器非常慢。
这个问题仍然没有答案。

标签： javascript html css tabulator

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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/

【讨论】：

请看我的问题，我不想让列适合/调整它们的大小。我想保持原样，摆脱灰色地带。
请检查更新的小提琴fiddle