我试着利用这个新的Tabulator js库特性“rowHeight”来强制表中的行具有特定的高度。但是，这似乎不能正常工作。它减少并截断了行内的单元格高度，而不是行高。单元格文本被垂直修剪，同时在行底部创建了看起来像填充但实际上不是的空白空间。即使我将rowHeight属性设置为15px，行仍保持22px的高度。
我已经尝试从Tabulator主页上显示的“Simple Table”表代码创建一个示例，并将rowHeight设置为15，但是，我遇到了上面解释的问题。请参见此处所附的示例尝试：
//define data array
var tabledata = [
{id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"19/02/1984", car:1},
{id:2, name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:true},
{id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, col:"green", dob:"22/05/1982", car:"true"},
{id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, col:"yellow", dob:"31/01/1999"},
{id:6, name:"Frank Harbours", progress:38, gender:"male", rating:4, col:"red", dob:"12/05/1966", car:1},
];
var table = new Tabulator("#example-table", {
layout:"fitDataFill",
height:"311px",
rowHeight:15,
data:tabledata, //assign data to table
autoColumns:true, //create columns from data field names
});<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div>
</body>
</html>
1条答案
按热度按时间wbgh16ku1#
这是因为.tabulator-row .tabulator-cell类的css，默认填充是4px，所以你的身高被设置为15，但实际上只有7，你可以删除填充css。