I want to manually resize a table column column.

search on Stack Overflow and tried

How to make columns of datatables.js resizable with jQuery UI & jQuery UI Resize with table and colspans

and google example, official documentation.

https://github.com/dobtco/jquery-resizable-columns & http://jsfiddle.net/Twisty/ah67jopf/3/

my example code

<table id="examTbl" class="table table-bordered table-hover table-sm dataTable dtr-inline" data-resizable="true">
<thead>
    <tr>
       <th><input type="checkbox" id="chkbox"></th>
       <th>1</th>
       <th>2</th>
    </tr>
</thead>
</table>

<style>
table, td, th {
    /*table-layout:fixed;*/
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>

DataTables setting

var table_option = {
   processing: true,
   serverSide: true,
   searching: false,
   responsive: true,
   dom: "lfBtip",
   ajax: {
      url: '/get/textVal'
   },
   columns: [{
      data: 'null',
      defaultContent: "<input type='checkbox' class='chkbox'>",
   },
   { 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);
    }
  });
 }
}

CodePudding user response：

I think you can add "resize" css property on your styles.

<table id="examTbl" class="table table-bordered table-hover table-sm dataTable dtr-inline" data-resizable="true">
<thead>
    <tr>
       <th><input type="checkbox" id="chkbox"></th>
       <th>1</th>
       <th>2</th>
    </tr>
</thead>
</table>

<style>
table, td, th {
    /*table-layout:fixed;*/
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    resize:horizontal;
}

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Edit: Try adding "autoWidth:false" on your datatable settings:

var table_option = {
   processing: true,
   serverSide: true,
   searching: false,
   autoWidth: false,
   responsive: true,
   dom: "lfBtip",
   ajax: {
      url: '/get/textVal'
   },
   columns: [{
      data: 'null',
      defaultContent: "<input type='checkbox' class='chkbox'>",
   },
   { 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);
    }
  });
 }
}

Solved in this fiddle: http://jsfiddle.net/Twisty/ah67jopf/3/