DataTables/examples_src/basic_init/scroll_x.xml

<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html">

<css lib="datatables" />
<css>
	th, td { white-space: nowrap; }
	#demo { width: 600px; }
</css>
<js lib="jquery" />
<js lib="datatables" />

<title>Scroll - horizontal</title>
<js><![CDATA[
$(document).ready(function() {
	$('#example').dataTable( {
		"scrollX": "100%"
	} );
} );
]]></js>

<info><![CDATA[

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 `dt-init scrollX` 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).


]]></info>

</dt-example>