數據表標頭未對齊

Question

下圖顯示了在您點擊文本框（搜索/過濾器..）之前數據表未對齊的標頭。一旦後者變得焦點，頭再次對齊。我注意到當scrollY關閉時，標題很好，我需要它。任何想法如何解決它。 在以下片段中，只需更改分頁選項，即可再次看到標題的重新對齊。

$('#RegSrc').DataTable({ 
 
    dom:"<'row'<'#tblnoitfy'>><'row'<'col-sm-4'l><'col-sm-8'p>>" + "<'row'<'col-sm-12'tr>>", 
 
      select: true, 
 
      scrollY: 200, 
 
      deferRender: true, 
 
      //scrollY:  500, 
 
      responsive: false, 
 
      fixedHeader: { 
 
       header: true, 
 
       footer: true 
 
      }, 
 
      "processing": true, 
 
      "serverSide": false, 
 
      bAutoWidth: true, 
 
      data: [], 
 
      rowCallback: function (row, data) { }, 
 
    }); 
 

 
$("#btn").click(function() { 
 
    $("#mdl").dockmodal(); 
 
})

<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> 
 
<script src="http://uxmine.com/demo/dockmodal/assets/js/jquery.dockmodal.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script> 
 
<link href="http://uxmine.com/demo/dockmodal/assets/css/jquery.dockmodal.css" rel="stylesheet"/> 
 
<input id="btn" type="button" value="Click ME!" /> 
 

 

 
<div style="display:none"> 
 
    <div id="mdl" class="panel-body"> 
 
    <input id="RegSrcsrcctl" type="text" /> 
 
    <input id="bt1" type="button" value="dummy search" /> 
 
    <table id="RegSrc" class="table table-bordered table-striped table-condensed mb-none" style="width:100%"> 
 
     <thead> 
 
     <tr> 
 
      <th></th> 
 
      <th><b>File Number</b></th> 
 
      <th><b>Patient Name</b></th> 
 
      <th><b>DOB</b></th> 
 
      <th><b>Age</b></th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>

Answer 1

我注意到，對於未對準的表寬度的原因是由於其寬度顯式設置爲100px initally，代替計算正確的寬度。這可能無法解決問題，但解決方法是強制將table和包裝div元素設置爲width:100%。這樣做確實適用於我測試的場景，但請注意，它可能會導致某些響應行爲的問題。調整是添加以下的CSS：

.dataTables_scrollHeadInner{ 
    width:100% !important; 
} 
.dataTables_scrollHeadInner table{ 
    width:100% !important; 
} 

UPDATE：

好，我看了看一些類似的問題，它涉及到你的表顯示在一個模式的事實。模式全視圖僅在數據表設置完成後纔會顯示，因此可能會出現列大小問題，直到您強制重新繪製動作爲止，例如更改窗口大小或選擇其中一個數據表選項。解決方法是在模態的打開事件上調用columns().adjust()，以便在顯示模態後重新繪製表格。所以我去看了一下你正在使用的碼頭圖書館的文檔。在那裏，我發現你可以指定一個函數，在模態選項中定義的open事件中被調用。把這個改變解決了這個問題，不需要改變CSS。在更新後的代碼看看：

var table = $('#RegSrc').DataTable({ 
 
    dom:"<'row'<'#tblnoitfy'>><'row'<'col-sm-4'l><'col-sm-8'p>>" + "<'row'<'col-sm-12'tr>>", 
 
    select: true, 
 
    scrollY: 200, 
 
    deferRender: true, 
 
    //scrollY:  500, 
 
    responsive: false, 
 
    fixedHeader: { 
 
     header: true, 
 
     footer: true 
 
    }, 
 
    "processing": true, 
 
    "serverSide": false, 
 
     bAutoWidth: true, 
 
     data: [], 
 
     rowCallback: function (row, data) { }, 
 
}); 
 
$("#btn").click(function() { 
 
    $("#mdl").dockmodal({ 
 
    open : function() { 
 
     table.columns.adjust(); 
 
    } 
 
    }); 
 
})

<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> 
 
<script src="http://uxmine.com/demo/dockmodal/assets/js/jquery.dockmodal.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script> 
 
<link href="http://uxmine.com/demo/dockmodal/assets/css/jquery.dockmodal.css" rel="stylesheet"/> 
 
<input id="btn" type="button" value="Click ME!" /> 
 

 

 
<div style="display:none"> 
 
    <div id="mdl" class="panel-body"> 
 
    <input id="RegSrcsrcctl" type="text" /> 
 
    <input id="bt1" type="button" value="dummy search" /> 
 
    <table id="RegSrc" class="table table-bordered table-striped table-condensed mb-none"> 
 
     <thead> 
 
     <tr> 
 
      <th></th> 
 
      <th><b>File Number</b></th> 
 
      <th><b>Patient Name</b></th> 
 
      <th><b>DOB</b></th> 
 
      <th><b>Age</b></th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>

Answer 2

另一個更新， 而是在初始化時迫使寬度爲100％，我做它的模態的開放活動，能獲得較一致的結果，我添加了更多事件來管理模態調整大小事件。

由於Sasang

var table = $('#RegSrc').DataTable({ 
 
    dom:"<'row'<'#tblnoitfy'>><'row'<'col-sm-4'l><'col-sm-8'p>>" + "<'row'<'col-sm-12'tr>>", 
 
    select: true, 
 
    scrollY: 200, 
 
    deferRender: true, 
 
    //scrollY:  500, 
 
    responsive: false, 
 
    fixedHeader: { 
 
     header: true, 
 
     footer: true 
 
    }, 
 
    "processing": true, 
 
    "serverSide": false, 
 
     bAutoWidth: true, 
 
     data: [{"Filenum":15090248,"FullName":"Ahmad Morsi abdul fattah Abu Maizer","DOB":"05 Dec 2017","Age":0},{"Filenum":170418115,"FullName":"Ahmad Morsi abdul fattah Abu Maizer","DOB":"05 Dec 2017","Age":0},{"Filenum":170418116,"FullName":"Ahmad Morsi abdul fattah Abu Maizer","DOB":"05 Dec 2017","Age":0},{"Filenum":170227111,"FullName":"asd dsf as a","DOB":"27 Feb 2017","Age":0},{"Filenum":15112775,"FullName":"marwam saleh moh saleem","DOB":"26 Nov 2015","Age":2},{"Filenum":15112777,"FullName":"marwam saleh moh saleem","DOB":"26 Nov 2015","Age":2},{"Filenum":15120996,"FullName":"marwam mohmmad saleem","DOB":null,"Age":null},{"Filenum":160215104,"FullName":"marwam mohmmad abdul fattah Abu Maizer","DOB":"12 Mar 2016","Age":1},{"Filenum":15112270,"FullName":"mohammad j saleh raqaad","DOB":"22 Nov 2015","Age":2},{"Filenum":15112772,"FullName":"salem mohmmad john sarjes","DOB":"22 Oct 2011","Age":6}], 
 
     "columns": [ 
 
     { 
 
      "className": 'details-control', 
 
      "width": "", 
 
      "orderable": false, 
 
      "data": null, 
 
      "defaultContent": '<i data-toggle class="fa fa-plus-square-o text-primary h5 m-none" style="cursor: pointer;"></i>' 
 
     }, 
 
     { "width": "20%", data: "Filenum" }, 
 
     { "width": "30%", data: "FullName" }, 
 
     { "width": "20%", data: "DOB" }, 
 
     { "width": "20%", data: "Age" } 
 
      ], 
 

 
      order: [[1, 'asc']] 
 
     
 
     
 
}); 
 
$("#btn").click(function() { 
 
    $("#mdl").dockmodal({ 
 
    open : function() { 
 
     table.columns.adjust(); 
 
     $('#RegSrc').attr("style","width:100%") 
 
    }, 
 
    popout: function() { table.columns.adjust(); }, 
 
     restore: function() { table.columns.adjust(); }, 
 
    }); 
 
})

<link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> 
 
<script src="http://uxmine.com/demo/dockmodal/assets/js/jquery.dockmodal.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script> 
 
<link href="http://uxmine.com/demo/dockmodal/assets/css/jquery.dockmodal.css" rel="stylesheet"/> 
 
<input id="btn" type="button" value="Click ME!" /> 
 

 

 
<div style="display:none"> 
 
    <div id="mdl" class="panel-body"> 
 
    <input id="RegSrcsrcctl" type="text" /> 
 
    <input id="bt1" type="button" value="dummy search" /> 
 
    <table id="RegSrc" class="table table-bordered table-striped table-condensed mb-none"> 
 
     <thead> 
 
     <tr> 
 
      <th></th> 
 
      <th><b>File Number</b></th> 
 
      <th><b>Patient Name</b></th> 
 
      <th><b>DOB</b></th> 
 
      <th><b>Age</b></th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>

Answer 3

浪費很長一段時間後，我發現了以下解決方案行之有效的Chrome和Firefox。首先，添加以下CSS樣式： -

<style> 
    .dataTables_scrollHeadInner { 
     width:100% !important; 
     padding: 0 !important; 
    } 
</style> 

在JavaScript，你可以隨時添加行： -

table.rows.add(someJson); 
table.draw(); 

其中 '表' 是一個全局變量指向數據表： -

table = $('#datatab').DataTable({ 
     ... 
}); 

在你的HTML，寬度= 「100％」 添加到表： -

<table id="datatab" class="..." width="100%"> 
     ... 
</table>