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

之所以不能简单地隐藏它，是因为其中包含一些内容，以确保表的列与表上方的 header 表保持对齐。

Answer 2

在css下添加，您就完成了...

table#claimListTable>thead {
    display: none;
}

查看更新的小提琴...

http://jsfiddle.net/EjFtX/60/

Answer 3

这就是我的头和身体之间的缝隙。 My gap

在查看元素时，我有一个底距：20px 它基于我的table元素，来自bootstrap.min.css样式。

然后我添加了

style="margin-bottom: 0px"

到我的表格元素，它消除了差距。

jQuery数据表在标头和正文部分之间有一定的差距

3 个答案: