jQuery 自动调整列宽数据表的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21330031/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Auto resizing of columns width datatable
提问by Yahiya
The datatable column are not auto resizing. Here is my code
数据表列不会自动调整大小。这是我的代码
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();
});
I want all the columns to auto resize at least based on their header value.
我希望所有列至少根据其标题值自动调整大小。
回答by davidkonrad
You just do it like if it was a "normal" <table>:
你就像是“正常”一样<table>：
th, td {
white-space: nowrap;
}
see fidle -> http://jsfiddle.net/YrWG5/with some extreme long header / content.
请参阅 fidle -> http://jsfiddle.net/YrWG5/带有一些极长的标题/内容。
回答by Rotimi
You can also use datatable's Fluid column widthfeature. This will help auto-resize and add a scroll both on the Xand Yaxis should you have more columns to display
您还可以使用数据表的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
} );
} );
Gotten from HERE
从这里得到
回答by sam ruben
Use the below code:
使用以下代码：
$($.fn.dataTable.tables(true)).DataTable()
.columns.adjust();
This will resize your table structure (css of the table).
这将调整您的表格结构（表格的 css）。
回答by epquick
Put this code after data table initialization:
将此代码放在数据表初始化之后：
oTable.find('thead th').css('width', 'auto');
