如何调整Tabulator表格宽度以适配所有浏览器缩放比例

问题分析 #

当前配置存在两个核心问题导致缩放异常：

1. 列宽百分比总和超过100%（Type列42% + Value列60% = 102%），缩放时会触发横向溢出或列挤压
2. layout: "fitDataTable" 模式是让表格先适配内容宽度，再整体适配容器，结合百分比列宽容易出现布局冲突

调整方案 #

1. 修正容器HTML与样式

• 修复*ngIf逻辑错误（原条件用||会导致始终显示，改为&&确保数据有效时渲染）
• 把容器的max-width: 100%改为width: 100%，确保容器占满可用宽度

修改后的HTML：

<div *ngIf="tableDataWorm && tableDataWorm.length > 0" id="ishaftTabulatorTable" style="width: 100%; max-height: 100%; position: relative;"></div>

2. 调整列宽配置

将列宽百分比总和修正为100%，或用flexGrow替代固定百分比，让列更灵活地自适应容器：

修改后的列配置：

this.iShaftTabulatorHeaders = [
    {
        title: "Type", 
        field: "name", 
        headerHozAlign: "left", 
        flexGrow: 2, // 用flexGrow分配宽度，替代固定百分比
        headerSort: false, 
        hozAlign: "left", 
        editable: false
    },
    {
        title: "Value", 
        headerHozAlign: "center", 
        flexGrow: 3,
        columns: [
            {
                title: "Min", 
                field: "minValue", 
                editor: "input",
                editable: editCheck, 
                headerSort: false, 
                flexGrow: 1,
                hozAlign: "right", 
                formatter: decimalFormatter,
                headerHozAlign: "right", 
                cellEdited: validateIShaft, 
                editorParams: {formatter: decimalFormatter}
            },
            {
                title: "Nom", 
                field: "nomValue", 
                editor: "input", 
                headerSort: false, 
                cellEdited: validateIShaft, 
                flexGrow: 1,
                hozAlign: "right", 
                formatter: decimalFormatter,
                headerHozAlign: "right", 
                editorParams: {formatter: decimalFormatter}
            },
            {
                title: "Max", 
                field: "maxValue", 
                editor: "input",
                editable: editCheck, 
                cellEdited: validateIShaft, 
                headerSort: false, 
                flexGrow: 1,
                hozAlign: "right", 
                formatter: decimalFormatter,
                headerHozAlign: "right", 
                editorParams: {formatter: decimalFormatter}
            },
        ],
    },
];

3. 优化Tabulator初始化配置

• 将layout改为fitColumns，让列自动填充容器宽度，适配缩放
• 开启autoResize，让表格自动响应窗口尺寸变化

修改后的初始化代码：

this.ishaftTabulatorTable = new Tabulator("#ishaftTabulatorTable", {
    maxHeight: "100%",
    width: "100%", // 明确表格宽度为100%
    data: ishaftTableData,
    layout: "fitColumns", // 替换为fitColumns模式
    headerSort: false,
    autoResize: true, // 开启自动响应窗口 resize
    columns: this.iShaftTabulatorHeaders,
});

补充说明 #

如果仍有局部显示问题，可以手动监听窗口 resize 事件强制重绘：

window.addEventListener('resize', () => {
    if (this.ishaftTabulatorTable) {
        this.ishaftTabulatorTable.redraw(true); // true表示强制重新计算布局
    }
});

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