dataTable表頭未對其解決方法

本文為博主原創，未經允許不得轉載：

       在tab頁中使用dataTable時，默認顯示的dataTable表頭與數據顯示正常，另一個的datatable則表頭與數據未對其。

檢查元素發現，datatable有一個div（類名為dataTables_scrollHeadInner）的width為100px，顯然是默認值，其獲取父元素的寬度失敗。

none導致的datatable無法成功獲取父元素的具體數值，所以導致了布局混亂。

       示例如下：

 

解決方法如下：

將原來jsp中table代碼展示如下：

<table id="data-table2" class=" table table-hover table-bordered dataTable no-footer dtr-inline"
                role="grid" aria-describedby="data-table_info" style="margin-left: 0px; width:100% !important;">
                <thead>
                    <tr>
                        <th>鏡頭名稱</th>
                        <th>一級區域名稱</th>
                        <th>客戶名稱</th>
                        <th>所屬行業類型</th>
                        <th>在線時長</th>
                        <th>離線時長</th>
                        <th>設備在線率</th>
                        <th>平台類型</th>
                    </tr>
                </thead>
            </table>

將其修改為一下格式即可，只需要給<th>標簽添加一個寬度即可。修改后代碼如下：

 <table id="data-table2" class=" table table-hover table-bordered dataTable no-footer dtr-inline"
                                        role="grid" aria-describedby="data-table_info" style="margin-left: 0px;">
                                        <thead>
                                            <tr role="row">
                                                <th width="22%">鏡頭名稱</th>
                                                <th width="11%">一級區域名稱</th>
                                                <th width="15%">客戶名稱</th>
                                                <th width="10%">所屬行業類型</th>
                                                <th width="13%">在線時長</th>
                                                <th width="13%">離線時長</th>
                                                <th width="10%">設備在線率</th>
                                                <th width="14%">平台類型</th>
                                            </tr>
                                        </thead>
                                    </table>

然后清除瀏覽器緩存，重新加載頁面，即可正常顯示。