Tabulator的rowHeight未按预期生效，是Bug还是使用误区？

你遇到的问题是因为Tabulator默认的单元格样式（上下内边距、行高）会抵消rowHeight的设置。默认情况下，.tabulator-cell有5px的上下内边距，加上文本默认的行高，就算你设了rowHeight:15，实际行高也会被撑到22px左右，还会截断文本。

直接上解决方案：

1. 自定义CSS调整单元格的内边距和行高，让内容总高度刚好匹配你设置的rowHeight
2. 确保rowHeight的值等于「上下内边距之和 + 文本行高」

修改后的完整代码如下：

<!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>
<style>
/* 自定义单元格样式，配合rowHeight:15px */
.tabulator-cell {
    padding: 2px 8px; /* 上下内边距各2px，左右保留默认8px */
    line-height: 11px; /* 2*2 + 11 = 15，刚好匹配rowHeight */
    white-space: nowrap; /* 防止文本换行导致行高增加 */
}
</style>
</head>
<body>
<div id="example-table"></div>

<script>
//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,
    autoColumns:true,
});
</script>
</body>
</html>

关键说明： #

• 默认.tabulator-cell的上下内边距是5px，改成2px后减少了6px的高度占用
• 调整line-height为11px，加上上下内边距的4px，总高度刚好15px，和rowHeight完全匹配
• white-space: nowrap避免文本换行，防止行高被意外撑大

这样设置后，行就会准确显示15px高度，单元格内的文本也不会被截断，底部的空白也会消失。

内容的提问来源于stack exchange，提问作者andrewlis