移除水平滚动条并使表格更宽答案

【问题标题】：Remove horizontal scroll bar and make table wider移除水平滚动条并使表格更宽
【发布时间】：2020-01-02 10:25:39
【问题描述】：

默认情况下，Tabulator 会减小表格的最大宽度并在表格底部显示水平滚动条。是否可以删除此滚动条并强制制表符增加表格的宽度（以便水平滚动条显示在浏览器窗口的底部）？

【问题讨论】：

【解决方案1】：

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

overflow-x: hidden;

要使表格更宽，您可以将其括在 <div> 中，并将其添加到特定 div 的 CSS 文件中。

table-layout: fixed;
width: 100%;

【讨论】：

【解决方案2】：

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

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

查看Layout Documentation 了解完整详情和工作示例

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

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

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

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

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

但从本质上讲，您最好只使用标准 HTML 表格，因为您似乎禁用了许多您将使用 Tabulator 的功能。

【讨论】：