How to set column width for DataTables
<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>