title: How to set column width for DataTables
body: <p>I want to set static width for all <a href="https://datatables.net/" rel="noreferrer">DataTables</a> (with scroll plugin) columns. </p>
  
  <p>It makes the columns wider if I set width for all <code>&lt;th&gt;</code> tags except one. And it doesn't work if the width is set for all tags. Plus, when I inspect via the developer tools, I don't see any <code>&lt;th&gt;</code> element with width <code>400px</code>. The elements have different width: <code>115px</code>, <code>132px</code>, <code>145px</code> ...</p>
  
  <p>Why is that? How can I set the exact width for columns? </p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.big-col {
    width: 400px;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var options = {
      "sScrollX": "100%",
      "sScrollXInner": "110%",
      "bScrollCollapse": true,
      "colReorder": true
  };
  
  $(document).ready(function() {
      $('#example').dataTable(options);
  });
  </code></pre>
  
  <p>Full example: <a href="http://fiddle.jshell.net/sergibondarenko/o1hoabep/8/" rel="noreferrer">http://fiddle.jshell.net/sergibondarenko/o1hoabep/8/</a></p>
  
  <p>Also, I tried the <a href="https://datatables.net/reference/option/columnDefs" rel="noreferrer">columnDefs</a> option, without success.</p>
  
  <pre><code> var options = {
      "columnDefs": [
        { "width": "100px", "targets": "_all" }
      ]
   };
  </code></pre>
  
  <p>The exact number of columns is unknown. The HTML table is built dynamically based on data from a server side.</p>