title: How to add horizontal scrollbar to datatable using css instead of datatable plugin?
body: <p>I have problem on the datatable width to allow overflow-x to scrollable. I want to fix the column width and not allow to resize the width, show the scroll bar if exceed the width.</p>
  
  <pre><code>&lt;table id="example" class="table table-striped table-bordered nowrap display" style="width:100%;table-layout:fixed;"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th style="width:30%;"&gt;Name&lt;/th&gt;
              &lt;th style="width:30%;"&gt;Position&lt;/th&gt;
              &lt;th style="width:30%;"&gt;Office&lt;/th&gt;
              &lt;th style="width:30%;"&gt;Age&lt;/th&gt;
              &lt;th style="width:30%;"&gt;Start date&lt;/th&gt;
              &lt;th style="width:30%;"&gt;Salary&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Tiger Nixon&lt;/td&gt;
              &lt;td&gt;System Architect&lt;/td&gt;
              &lt;td&gt;Edinburgh&lt;/td&gt;
              &lt;td&gt;61&lt;/td&gt;
              &lt;td&gt;2011/04/25&lt;/td&gt;
              &lt;td&gt;$320,800&lt;/td&gt;
          &lt;/tr&gt;       
  &lt;/table&gt;
  </code></pre>
  
  <p>I want the table to be displayed with fixed width for each of column without adjust automatically. Add horizontal scrollbar to allow content scrollable without change of its width.</p>
  
  <p>Set scrollX true in datatable will affect header alignment so i am not using it.Any solution i can make it using css?</p>