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 

提琴手

Answer 1

您必须折叠它，而不是隐藏产生间隙的行：

table#claimListTable thead {
    visibility: collapse;
}

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