如何使用jQuery分配表的大小？

Question

我想根据自己的意愿调整表格列的大小。我用的编码如下。

$('#Details').dataTable({
  "columnDefs": [
    {
      "width": "30%",  
      "targets": 'no-sort', 
      "orderable": true
    },{
      "width": "10%", 
      "orderable": true,
    },{
      "width": "10%", 
      "orderable": true,
    },{
      "width": "10%", 
      "orderable": true,
    },{
      "width": "10%", 
      "orderable": true,
    },{
      "width": "15%",
      "orderable": true,
    },{
      "width": "10%",  
      "orderable": true,
    },{
      "width": "5%",  
      "className": "dt-center",
      "targets": 'no-sort', 
      "orderable": false,
    }
  ],
});

但表格显示宽度不同。图片附在这里。

为什么这个不起作用？查询有什么问题吗？请帮助。

Answer 1

您可以使用解决方案

$('#Details').dataTable({
 "columnDefs": [
  {
    "width": "30%",  
    "orderable": true,
    "targets": 0
  },{
    "width": "10%", 
    "orderable": true,
    "targets": 1
  },{
    "width": "10%", 
    "orderable": true,
    "targets": 2
  },{
    "width": "10%", 
    "orderable": true,
    "targets": 3
  },{
    "width": "10%", 
    "orderable": true,
    "targets": 4
  },{
    "width": "15%",
    "orderable": true,
    "targets": 5
  },{
    "width": "10%",  
    "orderable": true,
    "targets": 6
  },{
    "width": "5%",  
    "className": "dt-center",
    "targets": 7, 
    "orderable": false,
  }
 ],
});

参考文档： https://datatables.net/forums/discussion/30530/set-fixed-column-width

希望这会对你有所帮助。

Answer 2

添加此CSS，它会在您分配时设置您的表格布局：

#Details{
  margin: 0 auto;
  width: 100%;
  clear: both;
  border-collapse: collapse;
  table-layout: fixed; // ***********add this
  word-wrap:break-word; // ***********and this
}