Remove horizontal scroll bar and make table wider

Question

By default, Tabulator reduces the max width of the table and displays a horizontal scroll bar at the bottom of the table. Is it possible to remove this scroll bar and force tabulator to increase the width of the table (so that the horizonta scrollbar is displayed at the bottom of the browser window)?

Louiselouisette

You might want to look at the layout options for Tabulator: tabulator.info/docs/4.5/layout#fittowidth – Penicillin

Answer 1

Update

As of Tabulator v4.7 there is a built in layout mode for handling this. the fitDataTable layout mode will fit the width table to its contents:

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

See the Layout Documentation for full details and a working example

Original Answer

There is no built in feature for allowing external scrolling of the table. The table is based in a div and so will take up 100% the width of its parent element.

It will then either handle scrolling inside the table or resize the columns to fit depending on how your table is configured.

You could make some CSS tweaks to allow this form of display but it may cause the table to malfunction under certain circumstance, depending on your configuration.

You would need to include the following CSS after the tabulator style sheet has been included:

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

But essentially at that point you may be better off just using a standard HTML table as you seem to be disabling a lot of the features that you would use Tabulator for.

Soda

No! Tabulator is great. I'll continue using it! :) Thank you for your support!! – Harmless

in version 5.0 it is class called tabulator-tableholder instead of tabulator-tableHolder – Guayule

Answer 2

Add this to your CSS file for the div containing the horizontal scrollbar.

overflow-x: hidden;

To make the table wider, you can enclose it within a <div> and add this to the CSS file for that particular div.

table-layout: fixed;
width: 100%;

Blacksnake

Thank you for your response. However, I suppose your answer does not relate specifically to tabulator.info ? I tried overflow-x: hidden and it did not work. – Harmless

@Jonas No, but this is generally the way of hiding the horizontal scroll bars. I am not familiar with tabulator, but if you can show some code of what you have done till now, I may be able to assist further. – Blacksnake