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(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，您看到的标题行实际上位于一个单独的表中，数据表试图与包含数据行的主表保持同步。

我发现有很多东西可能导致标题行错位。我建议将表标记的html中的样式设置移动到一个类中 - 这样标题表也可能更容易获得它们。我看到你有宽度：150％ - 特别是这似乎是可能的原因。

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

Answer 3

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

此问题的我的版本是由第三方CSS文件引起的，该文件将“box-sizing”设置为不同的值。我能够在不影响其他元素的情况下解决问题：

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

希望这有助于某人！

JQuery数据表 - 标题对齐问题

3 个答案: