CODEWITHSUNDEEP
javascriptjquerycss
Ashok.N
Ashok.N

Reputation: 1391

Jquery datatable has some gap between the header and the body part

I am working with Jquery datatable. My problem is that the Jquery datatable has some gap between the header and the body part.I have initialized the datatable as below:

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.

When I make <thead> part of the table claimListTable as display:none after initialization using developer tools, the gap area is vanishing. But I don't know how to do this after the table initialization using jquery. If at all if there is any other workaround, that would also be fine.

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

enter image description here

Upvotes: 0

Views: 2500

Answers (3)

Kenneth Tambuwun
Kenneth Tambuwun

Reputation: 1

Here's what I have as my gap between head and body. My gap

Upon viewing the element, I had a margin-bottom: 20px It was based on my table element, from a bootstrap.min.css style.

Then I added

style="margin-bottom: 0px"

to my table element and it removed the gap.

Upvotes: 0

Salman Arshad
Salman Arshad

Reputation: 272266

Instead of hiding the row that is creating the gap you must collapse it:

table#claimListTable thead {
    visibility: collapse;
}

The reason why you cannot simply hide it is because contains some content to ensure that the table's columns remain aligned with the header table above it.

Upvotes: 6

ElusiveCoder
ElusiveCoder

Reputation: 1609

Add below css and you are done...

table#claimListTable>thead {
    display: none;
}

See updated fiddle...

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

Upvotes: 0

Related Questions