如何在数据表中设置一些列宽的列宽

Question

这是我的data table。

我似乎无法控制所有列的宽度：

$(document).ready(function() { 
    $('#example').DataTable({ 
     "ajax": 'ajax/data/arrays.txt' 
    }); 

我已经尝试了各种方法here:

$('#example').dataTable({ 
    "autoWidth": false 
}); 

而且here：

$('#example').dataTable({ 
    "columnDefs": [ 
    { "width": "20%", "targets": 0 } 
    ] 
}); 

无成功。 任何人都可以告诉我如何手动控制一些单独的列的宽度？我希望可以使用数据表中的现有方法来完成。

注意：如果我有机会，我会张贴小提琴。 fiddle here - 这是不完全一样的，但如果我的理解是正确的，我应该abloe控制列宽在这里：

var table = $('#example').DataTable(); 

Answer 1

我的经验是columns.width大多适于相对意图，即“我希望这个专栏是相对较大的。”每一列的宽度都有很多可能造成的影响，即使您用精确的百分比精确定位每列，您最终会感到沮丧。

如果你想确切的，精确的列宽的定义是没有办法解决硬编码的CSS：

table.dataTable th:nth-child(1) { 
    width: 20px; 
    max-width: 20px; 
    word-break: break-all; 
    white-space: pre-line; 
} 

table.dataTable td:nth-child(1) { 
    width: 20px; 
    max-width: 20px; 
    word-break: break-all; 
    white-space: pre-line; 
} 

http://jsfiddle.net/6eLg0n9z/

Answer 2

如果你有这样一个表，你的目标使用jquery datatable，

<table class="table" cellSpacing="0" width="100%" 
           id="families-table"> 
     <thead> 
      <tr> 
        <th>Name</th> 
        <th >Category</th> 
        <th><abbr title="Description">Des</abbr></th> 
      </tr> 
     </thead> 
</table> 

要控制列的宽度，你可以添加此

<table class="table" cellSpacing="0" width="100%" 
           id="families-table"> 
     <thead> 
      <tr> 
        <th **style="width: 250px;"**>Name</th> 
        <th >Category</th> 
        <th><abbr title="Description">Des</abbr></th> 
      </tr> 
     </thead> 
</table> 

添加inline style到列将完美运作。如果你注意到dev tools，你会发现datatable内嵌了width，所以你应用任何使用CSS文件的东西，它都会被覆盖。添加inline CSS到列对我来说工作得很好。 希望这有助于。

Answer 3

$(document).ready(function() { 
    // Setup - add a text input to each footer cell 
    $('#example tfoot th').each(function() { 
     var title = $(this).text(); 
     $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
    }); 

    // DataTable 
    var table = $('#example').removeAttr('width').DataTable({ 
      scrollY:  "400px", 
     scrollX:  true, 
     scrollCollapse: true, 
     paging:   false, 
     columnDefs: [ 
      { width: 300, targets: 0 }, 
      { width: 100, targets: 0 }, 
      { width:100, targets: 0 } 
     ], 
     fixedColumns: false}); 

    // Apply the search 
    table.columns().every(function() { 
     var that = this; 

     $('input', this.footer()).on('keyup change', function() { 
      if (that.search() !== this.value) { 
       that 
        .search(this.value) 
        .draw(); 
      } 
     }); 
    }); 
}); 

您可以参阅http://jsfiddle.net/7bh7w2tu/10为同一