可调整大小的数据表列 [jquery]

Question

我想手动调整 table 列的大小。

在 Stack Overflow 上搜索并尝试

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

和google示例，官方文档。

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

解决了fiddle：http://jsfiddle.net/Twisty/ah67jopf/3/

可调整大小的数据表列 [jquery]

columns of datatables resizable [jquery]

javascript

jquery

node.js

datatables

resizable