版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/li740207611/article/details/81911534
datatables 首行和下面的行不对齐问题
只是不对齐
以下面的datatables为例子，经过测试发现，如果你设置 width：100% ！important的话，下面的width属性是不会被使用的，而是
使用
datatables html设置
<table id="datatables" style="font-size: 12px; width: 100% !important;" class="list_table" role="grid" aria-describedby="datatable_info">
<thead>
<tr role="row">
<th style="width:50px " class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1">
<input type="checkbox" id="Checkall"/>
</th>
<th style="width:80px" class="sorting" id="appoint" tabindex="0" aria-controls="datatable" rowspan="1" >
日期
</th>
<th style="width:80px" class="sorting" tabindex="0" aria-controls="datatable" rowspan="1" colspan="1" >
文件
</th>
</thead>
</table>datatables js设置
var buttonArray = [];
var columnArray =
[{
"sClass": "text-center noVis",
"data": "time",
"render": function (data, type, full, meta) {
return '<input type="checkbox" class="checkchild" value="' + data + '" />';
},
"bSortable": false
},//使第一列显示chexkbox
{
"sClass": "text-center noVis",
"data": "time",
"defaultContent": ""
},
{ "data": "balanceFileName", "defaultContent": ""},
];
var bodyHeight = $(document.body).height();
var scrollY = bodyHeight * 0.55;
//Datatable 默认初始化配置
var settings = {
aLengthMenu:[[10, 25, 50,100,-1], [10, 25, 50,100,'全部']],
buttons: buttonArray,
columns: columnArray,
ajax: "/project/graph/api/time?projectId="+projectId,
stateSave:true,
scrollY: scrollY,
autoWidth:false, /* 该属性设置为false 则，在chrome的调试和非调试模式下列宽不在变化，但是并不影响datatables 根据行的宽度 重新设置列宽 */
columnDefs:[
{"width":"50px", "targets": [0],visible:false },//
{"width":"80px", "targets": [1] }, /* 如果该列要显示的数据内容，不仅大于设置的列宽而且大于行首则会造成不对齐的情况，所以如果对不起的，就看一下自己的行首字符数和显示的字符数是不是差别比较大，如果是的话这里的width需要设置取最大值。*/
{"width":"280px", "targets": [2] },
] ,
fnDrawCallback:function(){
$(".dataTables_empty").attr("colspan",'11');
}
};
var _settings = jQuery.extend({},options,settings);
//初始化datatables函数
sotockTable = $('#importFinanceList').DataTable(_settings);
sotockTable.on('preDraw', function () {
sotockTable.columns.adjust();
});
};