JQuery数据表-标题对齐问题

Question

我正在使用JQUERY Datatable。我已经在表格中填入了数据。此外，我还引入了水平滚动、垂直滚动和固定列。

我的div和table如下..

<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>

我正在将表绑定到div。

$("#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,
            });
});

这是我的问题

在结果表中，表头和表体列未正确对齐。我搜索了很多链接。但我不能得到任何解决方案。

Answer 1

你在使用这个插件吗？- https://datatables.net/

你发布的代码并没有提供足够的信息来说明你的问题。插件中有没有一些没有被正确引用的css？查看浏览器的开发人员工具并进行检查。

Answer 2

在没有更多细节的情况下，很难给出更多的建议。理想情况下，您应该尝试使用jsFiddle或类似的方法给出问题的有效示例。

由于您使用的是FixedHeader extra，因此您看到的标题行实际上位于一个单独的表中，datatables试图与具有数据行的主表保持同步。

我发现有很多东西会导致标题行不对齐。我建议将您在table标记的html中的样式设置移动到一个类中-这样头表可能更有可能也获得它们。我看到你的宽度: 150% -这似乎是一个特别可能的原因。

列是最初未对齐，还是仅在特定操作后才对齐？如果在执行操作(排序、滚动、过滤、调整窗口大小等)之后，您可能需要通过事件来捕获这些操作，并调用fnAdjustColumnSizing()来更正标题行。

Answer 3

我也遇到了同样的问题，我最终找到了一个对我有效的解决方案。

我的版本的这个问题是由第三方CSS文件引起的，它将‘box- file’设置为不同的值。我能够用下面的代码在不影响其他元素的情况下解决这个问题：

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

希望这对某些人有帮助！