<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-wide" table-class="display nowrap" order="14">

<css lib="datatables" />
<css>
	div.dataTables_wrapper {
		width: 800px;
		margin: 0 auto;
	}
</css>
<js lib="jquery" />
<js lib="datatables" />

<title>Scroll - horizontal</title>
<js><![CDATA[
$(document).ready(function() {
	$('#example').DataTable( {
		"scrollX": true
	} );
} );
]]></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>
