DataTables example Scroll - horizontal

DataTables has the ability to show tables with horizontal scrolling, which is very useful for when you have a wide table, but want to constrain it to a limited horizontal display area. To enable x-scrolling simply set the scrollXDT parameter to be whatever you want the container wrapper's width to be (this should be 100% in almost all cases with the width being constrained by the container element).

The example below shows a table too wide for the containing element with x-scrolling enabled. The CSS option of th, td { white-space: nowrap; } is also set to have the text content of each row on a single line (otherwise the browser will line break the text to have it fit into the available area).

The Javascript shown below is used to initialise the table shown in this example:

1
2
3
4
5
$(document).ready(function() {
    $('#example').dataTable( {
        "scrollX": true
    } );
} );

In addition to the above code, the following Javascript library files are loaded for use in this example: