title: Jquery datatables look weird
body: <p>does anybody know what my datatable looks this weird? I know it should be something trivial, but i just can not figure it out and it's bugging me all day. The sample data is data found on <a href="http://datatables.net/" rel="nofollow noreferrer">http://datatables.net/</a> (shamelessly copied 1:1 so this should not be a problem). I'm not overwriting by accident any default css rules and i didn't edit the default jquery theme flick.</p>
  
  <p>This is how i initialize my datatable:</p>
  
  <pre><code>$('#datatable').dataTable({ 
      "bJQueryUI": true,
      "sPaginationType": "full_numbers",
      "bSaveState": true,
      "aoColumnDefs": [
          {'sWidth':'40px', 'aTargets':[0]},
          {'sWidth':'350px', 'aTargets':[1]},
          {'sWidth':'350px', 'aTargets':[2]}
      ]});
  </code></pre>
  
  <p>this is how my <code>&lt;header&gt;</code> looks like:</p>
  
  <pre><code>&lt;script type="text/javascript" src="js/jquery-1.6.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;link type="text/css" rel="stylesheet" href="css/flick/jquery-ui-1.8.16.custom.css" /&gt;
  &lt;link type="text/css" rel="stylesheet" href="css/css3.css" /&gt;
  </code></pre>
  
  <p>screenshot of the datatable how it looks:</p>
  
  <p><img src="https://i.stack.imgur.com/5VCml.png" alt="screenshot of the problem"></p>