解决 datatable 中的 表头与表格内容不整齐 和 表头换行问题
1. 错误示例 (经验)
方法一
/****************表头不整齐**********************/
.dataTable th {
white-space: nowrap !important;
}
.dataTables_wrapper {
width: 100%;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
table.dataTable thead>tr>th.sorting_asc, table.dataTable thead>tr>th.sorting_desc,
table.dataTable thead>tr>th.sorting, table.dataTable thead>tr>td.sorting_asc,
table.dataTable thead>tr>td.sorting_desc, table.dataTable thead>tr>td.sorting
{
min-width: 121px;
}
.dataTables_filter, div[class="dataTables_paginate paging_simple_numbers"]
{
flex: 1 0 auto;
}
.dataTables_scroll {
overflow: auto;
}
/**************************************/
方法二
/****************表头不整齐**********************/
.dataTable th {
white-space: nowrap !important;
}
.dataTables_scrollHeadInner {
width: 100% !important;
}
/**************************************/
以上的两种方法都不好使
2. 正确方法
/* 这个时保证表体铺满 */
table.datatable {
width: 100% !important;
}
/* 这个有没有无所谓, 保证整个表内容不换行 */
table.datatable tr th, table.datatable tr td {
white-space: nowrap;
}
重点: 在 引用的函数 内加上: $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
注意: 还有一点就是, 无论加载那个位置, 这条代码先执行, 加载数据的后执行, 导致没有对齐, 故加上时间差
/* importance: 解决 Datatable 中表头错位的问题 (注意) */
for(var i= 50; i < 2000; i += 50) {
/* importance: 解决 Datatable 中表头错位的问题 (注意) */
setTimeout(function(){
$.fn.dataTable.tables({visible: true, api: true}).columns.adjust();
},i)
}