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

<css lib="datatables">
	div.container {
		width: 80%;
	}
</css>
<js lib="jquery" />
<js lib="datatables" />

<title>Flexible table width</title>
<js><![CDATA[
$(document).ready(function() {
	$('#example').DataTable();
} );
]]></js>

<info><![CDATA[

Often you may want to have your table resize dynamically with the page. Typically this is done by assigning `width:100%` in your CSS, but this presents a problem for Javascript since it can be very hard to get that relative size rather than the absolute pixels. As such, if you apply the `width` attribute to the HTML table tag or inline width style (`style="width:100%"`), it will be used as the width for the table (overruling any CSS styles).

This example shows a table with `width="80%"` and the container is also flexible width, so as the window is resized, the table will also resize dynamically.

]]></info>

</dt-example>
