如何移除/禁用Tabulator表格的默认内联样式？

你遇到的是Tabulator自动生成的内联样式优先级高于自定义类的问题，这里有几种靠谱的解决办法：

方法一：CSS强制覆盖（最快上手） #

直接在自定义样式里加!important，强制覆盖内联样式：

.custom-width{
  width: 150px !important;
}

这种方式简单直接，适合快速调整单个样式。

方法二：通过Tabulator配置避免生成内联样式 #

Tabulator的列配置里可以直接指定宽度，或者调整布局模式，从根源上不让内联样式生成：

1. 列定义中设置width #

在columns配置里给目标列加width属性，Tabulator会用这个值生成内联样式，替代默认计算值：

var table = new Tabulator("#example-table", {
    data: tabledata,
    columns: [
        {title:"Name", field:"name", width: 150}, // 直接设置宽度
        {title:"Name", field:"name"},
        {title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
    ],
});

2. 使用fitData布局 #

如果想让表格根据内容自动调整，同时避免固定内联宽度，可以设置layout: "fitData"：

var table = new Tabulator("#example-table", {
    data: tabledata,
    layout: "fitData", // 让列宽适配内容
    columns: [
        {title:"Name", field:"name", cssClass:"custom-width"},
        // 其他列...
    ],
});

方法三：手动移除内联样式（灵活定制） #

如果需要更灵活的控制，比如在表格渲染完成后批量移除内联样式，可以用Tabulator的tableBuilt回调：

var table = new Tabulator("#example-table", {
    data: tabledata,
    columns: [
        {title:"Name", field:"name", cssClass:"custom-width"},
        // 其他列...
    ],
    tableBuilt: function(){
        // 给带custom-width类的单元格移除width内联样式
        document.querySelectorAll(".custom-width").forEach(cell => {
            cell.style.removeProperty("width");
        });
    }
});

或者针对列的单元格，用cellCreated回调：

var table = new Tabulator("#example-table", {
    data: tabledata,
    columns: [
        {
            title:"Name", 
            field:"name", 
            cssClass:"custom-width",
            cellCreated: function(cell){
                // 移除当前单元格的width内联样式
                cell.getElement().style.removeProperty("width");
            }
        },
        // 其他列...
    ],
});

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