JQuery数据表-标头对齐问题

Question

我正在使用JQUERY Datatable。 我已经在表中填写了数据。 另外，我还介绍了水平滚动，垂直滚动和固定列。

我的div和表如下。

<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，这些CSS未被正确引用？ 查看浏览器的开发人员工具并进行检查。

Answer 2

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

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

我发现有很多事情可能导致标题行未对齐。 我建议将table标记的html中的样式设置移动到一个类中-这样，标题表也可能更容易获得它们。 我看到您有宽度：150％-特别是可能的原因。

列是最初对齐还是仅在特定操作之后才对齐？ 如果执行了一些操作（排序，滚动，过滤，调整窗口大小等）之后，则可能需要通过事件捕获它们，然后调用fnAdjustColumnSizing（）来更正标题行。

Answer 3

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

我这个版本的问题是由第三方CSS文件引起的，该文件将“ box-sizing”设置为其他值。 我可以使用以下代码解决此问题，而不会影响其他元素：

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

希望这对某人有帮助！