gpt4 book ai didi

javascript - 如何将 Tabulator 表适合固定高度和宽度的 div?

转载 作者:行者123 更新时间:2023-12-01 16:18:35 24 4
gpt4 key购买 nike

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

最佳答案

目前,您有表格的两个显示选项之一:

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

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

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

    关于javascript - 如何将 Tabulator 表适合固定高度和宽度的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58503232/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com