使用 Tabulator 设置最大列宽答案

【问题标题】：Setting maximum column width with Tabulator使用 Tabulator 设置最大列宽
【发布时间】：2019-02-07 14:54:26
【问题描述】：

我有一个带有 fitDataFill 布局的制表器网格。是否可以为某些列设置最大宽度？

[width] 属性似乎设置了固定宽度（即使自动布局会根据实际数据分配更小的宽度），[minWidth] 指定最小宽度（也用于交互式列调整大小）。

【问题讨论】：

【解决方案1】：

如果您想阻止用户将列的大小调整到超出特定宽度，您可以使用 CSS 进行设置。 Tabulator 为所有单元格和列元素添加 tabulator-field 属性，因此如果您想限制字段名称为“gender”的列的宽度，您需要使用以下 CSS：

.tabulator [tabulator-field="gender"]{
        max-width:200px;
}

【讨论】：

谢谢！但我实际上是在寻找相反的：指定自动布局使用的最大宽度（当内容太宽时），但如果用户愿意，可以让用户以交互方式增加宽度。
我明白了，width 属性是你最好的选择，如果用户愿意，仍然可以调整其大小

【解决方案2】：

聚会迟到了，但也有同样的问题。 From the documentation (v4.9)：

var table = new Tabulator("#example-table", {
    columnMaxWidth:300, //maximum column width of 300px
    columns:[
        {title:"name", field:"name", maxWidth:false} //remove max width on this column
    ]
});

如果您使用autoColumns（自动从数据字段名称添加列），您需要使用autoColumnsDefinitions（插入columns）。

var table = new Tabulator("#example-table", {
    columnMaxWidth: 300, //maximum column width of 300px
    autoColumns: true, //create columns from data field names,
    autoColumnsDefinitions: [
        { field: "Foo", maxWidth: false }, //don't limit width of Foo column
        { field: "Bar", maxWidth: false }
    ],
});

【讨论】：