如何在數據表中設置一些列寬的列寬

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爲同一