删除水平滚动条并使 table 更宽

Question

默认情况下，Tabulator 会减小 table 的最大宽度并在 table 底部显示水平滚动条。是否可以去掉这个滚动条，强制tabulator增加table的宽度（让水平滚动条显示在浏览器底部window）？

Answer 1

将此添加到包含水平滚动条的 div 的 CSS 文件中。

overflow-x: hidden;

要使 table 更宽，您可以将其包含在 <div> 中并将其添加到特定 div.[=13= 的 CSS 文件中]

table-layout: fixed;
width: 100%;

Answer 2

从 Tabulator v4.7 开始，有一个用于处理此问题的内置布局模式。 fitDataTable 布局模式将使宽度 table 适合其内容：

var table = new Tabulator("#example-table", {
    layout:"fitDataTable",
});

有关完整详细信息和工作示例，请参阅 Layout Documentation

table 没有允许外部滚动的内置功能。 table 基于 div，因此将占据其父元素宽度的 100%。

然后它将处理 table 内的滚动或调整列的大小以适应 table 的配置方式。

您可以进行一些 CSS 调整以允许这种形式的显示，但它可能会导致 table 在某些情况下出现故障，具体取决于您的配置。

在包含制表符样式 sheet 之后，您需要包含以下内容 CSS：

.tabulator, .tabulator-header, .tabulator-tableHolder{
    overflow:visible !important;
}

但从本质上讲，在这一点上，您最好只使用标准 HTML table，因为您似乎禁用了很多可以使用 Tabulator 的功能。

Remove horizontal scroll bar and make table wider