title: columns of datatables resizable [jquery]
body: <p>I want to manually resize a table column column.</p>
  <p>search on Stack Overflow and tried</p>
  <p><a href="https://stackoverflow.com/questions/46964156/how-to-make-columns-of-datatables-js-resizable-with-jquery-ui/46966259">How to make columns of datatables.js resizable with jQuery UI</a> &amp;
  <a href="https://stackoverflow.com/questions/18812432/jquery-ui-resize-with-table-and-colspans">jQuery UI Resize with table and colspans</a></p>
  <p>and google example, official documentation.</p>
  <p><a href="https://github.com/dobtco/jquery-resizable-columns" rel="nofollow noreferrer">https://github.com/dobtco/jquery-resizable-columns</a> &amp;
  <a href="http://jsfiddle.net/Twisty/ah67jopf/3/" rel="nofollow noreferrer">http://jsfiddle.net/Twisty/ah67jopf/3/</a></p>
  <p><strong>my example code</strong></p>
  <pre><code>&lt;table id=&quot;examTbl&quot; class=&quot;table table-bordered table-hover table-sm dataTable dtr-inline&quot; data-resizable=&quot;true&quot;&gt;
  &lt;thead&gt;
      &lt;tr&gt;
         &lt;th&gt;&lt;input type=&quot;checkbox&quot; id=&quot;chkbox&quot;&gt;&lt;/th&gt;
         &lt;th&gt;1&lt;/th&gt;
         &lt;th&gt;2&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;/table&gt;
  
  &lt;style&gt;
  table, td, th {
      /*table-layout:fixed;*/
      overflow:hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
  }
  &lt;/style&gt;
  </code></pre>
  <p><strong>DataTables setting</strong></p>
  <pre><code>var table_option = {
     processing: true,
     serverSide: true,
     searching: false,
     responsive: true,
     dom: &quot;lfBtip&quot;,
     ajax: {
        url: '/get/textVal'
     },
     columns: [{
        data: 'null',
        defaultContent: &quot;&lt;input type='checkbox' class='chkbox'&gt;&quot;,
     },
     { data: 'test1' },
     { data: 'test2' },
     ],
     autoWidth: false,
     drawCallback: function(settings) {
                  
     $('table th').resizable({
       handles: 'e',
       minWidth: 18,
       stop: function(e, ui) {
       $(this).width(ui.size.width);
      }
    });
   }
  }
  </code></pre>