解决 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)
}