title: How to set column widths to a jQuery datatable?
body: <p>I have a jQuery datatable(outlined in red), but what happens is that the table jumps out of the width I have set for the div(which is 650 px).</p>
  <p>Here is the screen shot:
  <img src="https://i.stack.imgur.com/kIcNT.jpg" alt="enter image description here" /></p>
  <p>Here is my code:</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
  
      var ratesandcharges1;
  
      $(document).ready(function() {
  
          /* Init the table*/
          $(&quot;#ratesandcharges1&quot;).dataTable({
              &quot;bRetrieve&quot;: false,
              &quot;bFilter&quot;: false,
              &quot;bSortClasses&quot;: false,
              &quot;bLengthChange&quot;: false,
              &quot;bPaginate&quot;: false,
              &quot;bInfo&quot;: false,
              &quot;bJQueryUI&quot;: true,
              &quot;bAutoWidth&quot;: false,
              &quot;aaSorting&quot;: [[2, &quot;desc&quot;]],
              &quot;aoColumns&quot;: [
              { sWidth: '9%' },
              { sWidth: '9%' },
              { sWidth: '9%' },
              { sWidth: '9%' },
              { sWidth: '9%' },
              { sWidth: '9%' },
              { sWidth: '9%' },
              { sWidth: '9%' },
              { sWidth: '9%' },
              { sWidth: '9%' },
              { sWidth: '10%' } ]
          });
  
          ratesandcharges1.fnDraw();
  
      });
  &lt;/script&gt;
  &lt;div id=&quot;ratesandcharges1Div&quot; style=&quot;width: 650px;&quot;&gt; 
  
  
  &lt;table id=&quot;ratesandcharges1&quot; class=&quot;grid&quot; &gt;
      &lt;thead&gt;
          &lt;!--Header row--&gt;
          &lt;tr&gt;
              &lt;th&gt;Charge Code&lt;/th&gt;
              &lt;th&gt;Rates&lt;/th&gt;
              &lt;th&gt;Quantity&lt;/th&gt;
              &lt;th&gt;Total Charge&lt;/th&gt;
              &lt;th&gt;VAT %&lt;/th&gt;
              &lt;th&gt;Calc. Type&lt;/th&gt;
              &lt;th&gt;Paid By&lt;/th&gt;
              &lt;th&gt;From&lt;/th&gt;
              &lt;th&gt;To&lt;/th&gt;
              &lt;th&gt;VAT&lt;/th&gt;
              &lt;th&gt;MVGB&lt;/th&gt;
           &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;!--Data row--&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Day/Tag&lt;/td&gt;
              &lt;td&gt;55.00&lt;/td&gt;
              &lt;td&gt;3.00&lt;/td&gt;
              &lt;td&gt;165.00&lt;/td&gt;
              &lt;td&gt;20.00&lt;/td&gt;
              &lt;td&gt;Rental Time&lt;/td&gt;
              &lt;td&gt;Bill-to/Agent&lt;/td&gt;
              &lt;td&gt;5/11/2010&lt;/td&gt;
              &lt;td&gt;08/11/2010&lt;/td&gt;
              &lt;td&gt;33.00&lt;/td&gt;
              &lt;td&gt;1.98&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;PAI&lt;/td&gt;
              &lt;td&gt;7.50&lt;/td&gt;
              &lt;td&gt;3.00&lt;/td&gt;
              &lt;td&gt;22.50&lt;/td&gt;
              &lt;td&gt;20.00&lt;/td&gt;
              &lt;td&gt;Rental Time&lt;/td&gt;
              &lt;td&gt;Driver/Cust.&lt;/td&gt;
              &lt;td&gt;5/11/2010&lt;/td&gt;
              &lt;td&gt;08/11/2010&lt;/td&gt;
              &lt;td&gt;4.50&lt;/td&gt;
              &lt;td&gt;0.00&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;BCDW&lt;/td&gt;
              &lt;td&gt;15.00&lt;/td&gt;
              &lt;td&gt;3.00&lt;/td&gt;
              &lt;td&gt;45.00&lt;/td&gt;
              &lt;td&gt;20.00&lt;/td&gt;
              &lt;td&gt;Rental Time&lt;/td&gt;
              &lt;td&gt;Driver/Cust.&lt;/td&gt;
              &lt;td&gt;5/11/2010&lt;/td&gt;
              &lt;td&gt;08/11/2010&lt;/td&gt;
              &lt;td&gt;9.00&lt;/td&gt;
              &lt;td&gt;0.54&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;BTP&lt;/td&gt;
              &lt;td&gt;7.15&lt;/td&gt;
              &lt;td&gt;3.00&lt;/td&gt;
              &lt;td&gt;21.45&lt;/td&gt;
              &lt;td&gt;20.00&lt;/td&gt;
              &lt;td&gt;Rental Time&lt;/td&gt;
              &lt;td&gt;Driver/Cust.&lt;/td&gt;
              &lt;td&gt;5/11/2010&lt;/td&gt;
              &lt;td&gt;08/11/2010&lt;/td&gt;
              &lt;td&gt;4.29&lt;/td&gt;
              &lt;td&gt;0.26&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;    
  </code></pre>
  <p>Any ideas ?</p>
  <p>Thanks</p>