自动调整列宽度数据表的大小

Question

数据表列不是自动调整大小的。这里是我的代码

 var oTable =$('#test').dataTable({ 
       "bJQueryUI": true, 
       "aaData": aDataSet, 
       "sPaginationType": "full_numbers", 
       "oTableTools": { 
       "aButtons": [ {"sExtends": "csv" , "sButtonText": "Save as CSV"}], 
       "sSwfPath": "js/jquery/copy_csv_xls.swf" 
       }, 
       "bAutoWidth" : true, 
       "sDom": '<"H"lCf>t"H"<"F"iTp>', 
       "aoColumnDefs": [ 
       { "bVisible": true, "aTargets": [ 11 ] } 
       ], 
       "aoColumns": [ 
        { "sTitle": "column1" }, 
        { "sTitle": "column1" }, 
        { "sTitle": "column1" }, 
        { "sTitle": "column1"}, 
        { "sTitle": "column1"}, 
        { "sTitle": "column1" }, 
        { "sTitle": "column1" }, 
        { "sTitle": "column1" }, 
        { "sTitle": "column1"}, 
        { "sTitle": "column1 By"}, 
        { "sTitle": "column1 Date"} 
       ] 
      }); 
      oTable.fnAdjustColumnSizing(); 
     }); 

我希望所有的列自动调整ATLEAST基于thier头值

Answer 1

你只是不喜欢它，如果它是一个“正常” <table>：

th, td { 
    white-space: nowrap; 
} 

看到fidle - >http://jsfiddle.net/YrWG5/与一些极端长头/内容。

Answer 2

将这个代码数据表初始化后：

oTable.find('thead th').css('width', 'auto'); 

Answer 3

您还可以使用DataTable的Fluid column width功能。这将有助于自动调整大小，并添加滚动无论在X和Y轴你应该有更多的列显示

$(document).ready(function() { 
    var table = $('#example').DataTable({ 
     scrollY:  "300px", 
     scrollX:  true, 
     scrollCollapse: true, 
     paging:   false, 
     columnDefs: [ 
      { width: '20%', targets: 0 } 
     ], 
     fixedColumns: true 
    }); 
}); 

从HERE

得到