JQuery Datatable-标题对齐问题

我在jquerydatatable中工作。我已经把数据填在表格里了。此外，我还介绍了水平卷轴、垂直卷轴和固定列

我的分区和表格如下

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

使用的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>

这是我的问题

---

在结果表中，标题和正文列未正确对齐。我搜索了很多链接。但是我无法找到任何解决方案。

你在使用这个插件吗？-

---

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

如果没有更多细节，很难给出更多建议。理想情况下，您应该尝试使用JSFIDLE或类似工具给出一个问题的工作示例

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

我发现有许多因素会导致标题行未对齐。我建议将表标记的html中的样式设置移动到一个类中，这样头表可能更容易得到它们。我看到你有宽度：150%——这似乎是一个特别可能的原因

---

柱是否最初未对齐，还是仅在采取特定措施后才对齐？如果在执行操作（排序、滚动、筛选、窗口大小调整等）后，您可能需要通过事件捕获这些操作，并调用fnAdjustColumnsize（）来更正标题行。

我也遇到了同样的问题，我最终找到了一个适合我的解决方案

我的版本是由第三方CSS文件导致的，该文件将“框大小”设置为不同的值。我能够通过以下代码在不影响其他元素的情况下修复该问题：

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

希望这对别人有帮助

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

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