javascript - Jquery 数据表在标题和正文部分之间有一些差距

Question

我正在使用 Jquery 数据表。我的问题是 Jquery 数据表在标题和正文部分之间有一些间隙。我已按如下方式初始化数据表:

var table = $('#claimListTable').DataTable({
            "bSort": false,
            "scrollY": 720, // inconsistent IE7/other
            "scrollX": true,
            "searching": false,
            "paging": false,
            "info": false,
            "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
                // highlight groups of 3 rows
                var odd = Math.floor(iDisplayIndex / 3) % 2;
                var rowClass = odd == 1 ? "odd" : "even";
                $(nRow).attr("class", rowClass);
                return nRow;
            }

        });
        $("thead th").css({"border-bottom":"none","padding": "5px 0px"});

        $("#claimListTable.dataTable thead th").css({"border-bottom":"none",
            "padding": "5px 0px"});
        $("#claimListTable.dataTable tbody td").css({"border-bottom":"none",
            "padding": "5px 0px"});
        $("#claimListTable.dataTable tbody tr").css({"cursor": "default"});
        $("div .dataTables_scrollBody").css({"overflow-x": "auto",
            "overflow-y": "auto",
            "border-bottom": "none"});

    }

[![enter image description here][1]][1]There is some gap between the header part and the body part after the initialization of the datatable. 

当我制作 <thead>表格的一部分 claimListTable作为display:none使用开发人员工具初始化后，间隙区域正在消失。但我不知道如何在使用 jquery 初始化表后执行此操作。如果有任何其他解决方法，那也很好。

I could not able to create the working fiddle as it has some dependencies, but I created a sample fiddle to get some idea 

Jsfiddle

Answer 1

不是隐藏造成间隙的行，而是必须折叠它:

table#claimListTable thead {
    visibility: collapse;
}

您不能简单地隐藏它的原因是因为包含一些内容以确保表格的列与其上方的标题表格保持对齐。