可調整大小的數據表列 [jquery]

Question

我想手動調整表格列的大小。

在 Stack Overflow 上搜索並嘗試

如何使用 jQuery UI和jQuery UI 使用 table 和 colspans 調整datatables.js 的列大小

和谷歌示例，官方文檔。

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

我的示例代碼

<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>

數據表設置

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);
    }
  });
 }
}

Answer 1

我認為您可以在樣式上添加“調整大小”css 屬性。

 <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; }

Answer 2

編輯：嘗試在您的數據表設置中添加“autoWidth:false”：

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);
    }
  });
 }
}

在這個小提琴中解決： http : //jsfiddle.net/Twisty/ah67jopf/3/