我正在尝试在具有固定高度和宽度的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 {
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>
答案 0 :(得分:0)
我已将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>
答案 1 :(得分:0)
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/
答案 2 :(得分:0)
目前,您有该表的两个显示选项之一:
因此,在您的方案中,您可以考虑更改背景颜色以使其更适合使用,但没有办法隐藏多余的空间。
在即将到来的4.6版(将于2020年初推出)中,将有一种新的显示模式,该模式是两者之间的混合,它将允许表格展开直到溢出,然后处理表格内部的滚动