Home » Tables » Datatables Scrollx Responsive

Datatables Scrollx Responsive


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.


In the modern world of responsive web design tables can often cause a particular problem for designers due to their row based layout.

Responsive is an extension for DataTables that resolves that problem by optimising the table’s layout for different screen sizes through the dynamic insertion and removal of columns from the table.

01/05/2017 With the scrollX property uncommented I get the behavior as described.

Ive attached a pic of the generated HTML with the scrollX property enabled.

Same behavior if I #, My datatables is in a DIV and horizontal Scrolling enable due to huge table.

When fixed header was set it was set as FIXED, and a new table is inserted at the BODY rather than inside the div.

I made it appended to the DIV instead of BODY so that the overflow rule might be inherited.

58 rows This example shows Responsive in use with the scrollY option to present a scrolling table #, I am using DataTables plugin with Responsive Table and fixed yScroll and disabling xScroll.

But I am still getting the Horizontal Scrollbar, though I am adding the code like below.

scrollY: 200, scrollX : false,, I found an article on the DataTables Forum regarding ScrollX not working (actually reviewed that before posting this issue).

That article led me to try a few style adjustments.

but these did not work either.

scrollX : true, responsive : false However, it’s very possible that I did not catch or reproduce the scenario where the “dom” option.

Editor’s inline editing mode also supports the FixedColumns extension for DataTables.

FixedColumns allows one or more columns to be frozen in place at the edges of a scrolling table, while still remaining inline editable, as shown in this example.


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:, To enable y-scrolling simply set the scrollY parameter to be whatever you want the container wrapper’s height to be (any CSS measurement is acceptable, or just a number which is treated as pixels).

Note also that the scrollCollapse option is enabled in this example.

This will have the container match the height of the rows shown in the table if that height is smaller than that given height by.

datatables scrollx responsive