Home » Tables » Datatables Scrollx Width

Datatables Scrollx Width


Since: DataTables 1.


Horizontal scrolling.


Enable horizontal scrolling.

When a table is too wide to fit into a certain layout, or you have a large number of columns in the table, you can enable horizontal (x) scrolling to show the table in a viewport, which can be scrolled.

DataTables designed and created by.

I am unable to get FixedHeader to work with a datatable that is wide and requires horizontal scrolling.

I instantiate the datatable like so.

table = $(‘# dataTable ‘).

DataTable ({ dom: ‘Bfrtip’, processing: true, data: dataSet, scrollX : true, fixedHeader: true, The scrollX parameter unfortunately does not work for me.

No matter what value I put in there (100px, 50%, etc) the table always spans beyond he page.

By removing scrollXInner and adjusting the outer div’s width that is on the page, I got my desired layout.

Based on this, I was able to make it working (issue: when FixedHeader is floating, sorting would not work ==> see update 1 below to fix it).

Explanations: FixedHeader (.

dataTables _scrollHeadInner) is a different table outside of datatable (.

dataTables _scrollBody)when scrolling vertically, it will check scrolltop and set FixedHeader top accordingly.

when scrolling horizontally, it will scroll.

If you are using Bootstrap classes to the table, you might ran into this width issue.

To fix this, use the datatable default option “autoWidth”: false.

Enable or disable automatic column width calculation.

This can be disabled as an optimisation (it takes a finite amount of time to calculate the widths) if the tables widths are passed in using, After I load the page and click on the header, so that it expands and shows normally, I inspect the table header and record the width of the.

dataTables _scrollHeadInner div.

In my case it is 715px, for example.

Then add that width to css:.

dataTables _scrollHeadInner { width : 715px !important; }, 09/04/2019 ScrollX Datatables not scrolling whole width of tables [Answered] RSS 2 replies Last post Apr 09, 2019 09:06 AM by Shadow_Kittencorn, 2.

1 Table CSS Classes.

The class argument specifies the CSS classes of the table.

The possible values can be found on the page of default styling options.

The default value display basically enables row striping, row highlighting on mouse over, row borders, and highlighting ordered columns.

You can choose a different combination of CSS classes, such as cell-border and stripe:, 31/07/2017 One of the most common issues with a table using jQuery DataTables and Bootstrap framework is when the table is initially hidden.

For example, your table is located in a tab, accordion menu or modal.

When user activates the tab or opens the menu and table becomes visible, it usually has columns not working and having incorrect width or unexpected behavior.

web#web #laravel+nuxtjsdatatables scrollx width