title: jQuery DataTables: control table width
body: <p>I have a problem controlling the width of a table using the jQuery DataTables plugin.  The table is supposed to be 100% of the container width, but ends up being an arbitrary width, rather less than the container width.</p>
  
  <p>Suggestions appreciated</p>
  
  <p>The table declaration looks like this</p>
  
  <pre><code>&lt;table id="querytableDatasets" class="display" cellspacing="0"
  cellpadding="3"     width="100%"&gt;
  </code></pre>
  
  <p>And the javascript</p>
  
  <pre><code>jQuery('#tab-datasets').load('/cgi-bin/qryDatasets', '', function (){  
      jQuery('#querytableDatasets').dataTable({  
          "bPaginate": false,  
          "bInfo": false,  
          "bFilter": false  
      });  
  });  `  
  </code></pre>
  
  <p>Inspecting the HTML in Firebug, you see this (note the added style="width: 0px;")</p>
  
  <pre><code>&lt;table id="querytableDatasets" class="display" cellspacing="0" 
  cellpadding="3" width="100%" style="width: 0px;"&gt;
  </code></pre>
  
  <p>Looking in Firebug at the styles, the table.display style has been overridden.  Can't see where this is coming from</p>
  
  <pre><code>element.style {  
    width:0;}    
  
  -- dataTables.css (line 84
  table.display { 
    margin:0 auto;  
    width:100%;  
  }  
  </code></pre>