Tabulator表格行高异常：行高等于表格高度而非自适应内容

我从Tabulator快速入门指南复制了以下代码：

JS代码 #

// 定义示例数据
var tabledata = [
    {id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
    {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
    {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
    {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
 ];

// 在id为example-table的DOM元素上创建表格
var table = new Tabulator("#example-table", {
    height:205, // 设置表格高度，启用虚拟DOM提升渲染速度
    data:tabledata, // 绑定数据
    layout:"fitColumns", // 列宽自适应表格宽度
    columns:[ // 定义列配置
        {title:"姓名", field:"name", width:150},
        {title:"年龄", field:"age", align:"left", formatter:"progress"},
        {title:"最喜欢的颜色", field:"col"},
        {title:"出生日期", field:"dob", sorter:"date", align:"center"},
    ],
    rowClick:function(e, row){ // 行点击事件
        alert("第" + row.getData().id + "行被点击！");
    },
});

HTML代码 #

<link href="https://unpkg.com/tabulator-tables@5.2.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.2.3/dist/js/tabulator.min.js"></script>

<div id="example-table"></div>

这段代码在Stack Overflow代码片段中运行正常，但本地运行时出现异常：

每行高度与整个表格高度一致。而Tabulator官方文档明确说明：

默认情况下，Tabulator会自动调整行高以适配单元格内容。

问题原因及修复方案 #

这个问题的核心是Tabulator的CSS样式文件未正确加载。缺少核心CSS时，表格的布局规则（包括行高、单元格间距等）无法生效，导致行元素异常拉伸。

你可以按以下步骤排查：

• 检查HTML中CSS链接的拼写是否正确，确保没有语法错误
• 确认本地网络可以访问unpkg CDN，或者将CSS文件下载到本地后引入
• 用浏览器开发者工具（F12）的"网络"面板查看CSS请求状态，确认文件返回200（加载成功）

另外，建议将CSS和JS的版本统一为你查看的文档版本（5.3.x），避免版本不兼容问题：

<link href="https://unpkg.com/tabulator-tables@5.3.0/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.3.0/dist/js/tabulator.min.js"></script>

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