JQuery Datatable - 標題對齊問題

我正在JQUERY Datatable中工作。我填寫了表格中的數據。另外，我介紹了水平滾動，垂直滾動和固定列。JQuery Datatable - 標題對齊問題

我的股利和表如下..

<div id="div1" style="padding-left: 5px;"> 
</div> 

<table class='tftable' cellspacing='0' rules='all' border='1' id='ItemDetails' cellpadding='0' style='font-family: Arial; border-collapse:collapse;width:150%;'> 
<thead> 
<tr class='tftable'> 
............... 
</tr> 
</thead> 
<tbody> 
.......... 
</tbody> 
</table>

我綁定表來覈實。

$("#div1").html(html)

CSS和JS使用：

<link rel="stylesheet" type="text/css" href="../Scripts/jquery-plugins/dataTables/dataTables/1.9.4/css/jquery.dataTables.css" /> 
<script type="text/javascript" src="../Scripts/jquery-plugins/dataTables/dataTables/1.9.4/js/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="../Scripts/jquery-plugins/dataTables/fixedHeader/2.0.6/FixedHeader.min.js"></script> 
<script src="../Scripts/jquery-plugins/dataTables/fixedColumns/2.0.3/FixedColumns.min.js"></script>

我的document.ready是

$(document).ready(function() { 

      var oTable = $('#ItemDetails').dataTable({ 
       "bAutoWidth": false, 
       "bPaginate": true, 
       "bSort": true, 
       "sScrollX": "100%", 
       "bScrollCollapse": true, 
       "sScrollY": "395px", 
       "aoColumns": [{ "sWidth": "15%" }, { "sWidth": "2%" }, { "sWidth": "2%" }, { "sWidth": "8%" }, { "sWidth": "5%" }, { "sWidth": "6%" }, { "sWidth": "7%" }, { "sWidth": "10%" }, { "sWidth": "3%" }, { "sWidth": "2%" }, { "sWidth": "4%" }, { "sWidth": "5%" }, { "sWidth": "5%" }, { "sWidth": "10%" }, { "sWidth": "10%" }], 
       "aoColumnDefs": [ 
         { 
          "bSortable": false, "aTargets": [1,2,3,4,5,6,7,8,9,10,11,12,13,14] 
         } 
       ] 
      }); 
      new FixedColumns(oTable, { 
       "iLeftColumns": 3, 
      }); 
});

這是我的問題，

在結果表中，頭和身體列未正確對齊。我搜索了很多鏈接。但我力求得到任何解決方案。

來源

2014-02-27 RobinHood

你使用這個插件嗎？ - https://datatables.net/

您發佈的代碼並不能真正提供足夠的信息來說明您的問題。插件中是否包含一些未被正確引用的css？查看瀏覽器的開發者工具並檢查。

來源

2014-02-27 08:52:43 Starscream1984

是的，我使用的是https://datatables.net/。另外，我更新了我的問題。 – RobinHood

很難在沒有更多細節的情況下給予建議方式。理想情況下，你應該嘗試使用jsFiddle或類似的方法給出一個問題的實例。

由於您使用的是FixedHeader extra，因此您看到的標題行實際上位於單獨的表中，數據表嘗試與主表與數據行保持同步。

我發現有很多事情可能導致標題行未對齊。我建議將表格標記的html中的樣式設置移動到一個類中 - 這樣頭表可能更容易得到它們。我看到你有寬度：150％ - 這似乎是一個可能的原因。

列最初是錯位還是僅在特定操作之後錯位？如果在動作（排序，滾動，過濾，窗口大小調整等）之後，您可能需要通過事件捕獲這些事件，並調用fnAdjustColumnSizing（）來更正標題行。

來源

2014-02-27 17:01:23

我有同樣的問題，我最終找到了解決方案，爲我工作。

此版本的問題是由第三方CSS文件引起的，它將'box-sizing'設置爲不同的值。我能夠解決這個問題，而不影響其他元素與代碼如下：

$table.closest(".dataTables_wrapper").find("*").css("box-sizing","content-box").css("-moz-box-sizing","content-box");

希望這可以幫助別人！

來源

2015-03-29 18:20:40 Strucker

JQuery Datatable - 標題對齊問題

回答

相關問題