title: Angularjs angular datatables changing column width on DTColumnDef
body: <p><strong>Version</strong>: AngularJS 1.6.4, angular-datatables 0.5.6</p>
  
  <p><strong>Question</strong>: Not being able to change column width with </p>
  
  <pre><code>.withOption('width', '20%')
  </code></pre>
  
  <p>I have looked through most of the SO questions but still haven't found the answers for it.</p>
  
  <p>Here is my sample code: </p>
  
  <p><strong><em>JS:</em></strong></p>
  
  <pre><code> $scope.dtOptions = DTOptionsBuilder.newOptions()
      .withOption('paging', false)
      .withOption('bInfo', false)
      .withOption('searching', false)
      .withScroller().withOption('scrollY', 300)
      .withOption('responsive', true)
      .withOption('scrollX', true)
      .withOption('scrollCollapse', true)
      .withOption("rowCallback", rowCallback)
      .withOption('autoWidth', true);
  
  
   $scope.dtColumnDefs = [
          DTColumnDefBuilder.newColumnDef(0).notSortable(),
          DTColumnDefBuilder.newColumnDef(1).notSortable(),
          DTColumnDefBuilder.newColumnDef(2),
          DTColumnDefBuilder.newColumnDef(3),
          DTColumnDefBuilder.newColumnDef(4),
          DTColumnDefBuilder.newColumnDef(5).notSortable(),
          DTColumnDefBuilder.newColumnDef(6).notSortable(),
          DTColumnDefBuilder.newColumnDef(7).notSortable(),
          DTColumnDefBuilder.newColumnDef(8).notSortable().withOption('width', '20%'),
          DTColumnDefBuilder.newColumnDef(9).notSortable(),
          DTColumnDefBuilder.newColumnDef(10).notSortable(), 
          DTColumnDefBuilder.newColumnDef(11).notSortable(),
          DTColumnDefBuilder.newColumnDef(12).notSortable(),
          DTColumnDefBuilder.newColumnDef(13).notSortable()
      ];
  </code></pre>
  
  <p><strong><em>HTML:</em></strong></p>
  
  <pre><code> &lt;table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="hover"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                       &lt;th&gt;&lt;!--14 headers here--&gt;&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
          &lt;tbody&gt;
                  &lt;tr&gt;
                       &lt;td&gt;&lt;!--14 data cells here--&gt;&lt;/td&gt;
                  &lt;/tr&gt;
         &lt;/tbody&gt;
   &lt;/table&gt;
  </code></pre>
  
  <p>I have confirmed that most of the dtOptions withOption are working fine except </p>
  
  <pre><code> .withOption('autoWidth', true);
  </code></pre>
  
  <p>In dtColumnDefBuilder,</p>
  
  <pre><code> .notSortable() 
  </code></pre>
  
  <p>is working fine too but not the </p>
  
  <pre><code>.withOption('width','20%')
  </code></pre>
  
  <p>Things I have tried:</p>
  
  <ul>
  <li>Setting inline style width for the table header</li>
  <li>comment out dtOptions .withOption() to check </li>
  </ul>
  
  <p>Thanks for helping</p>