Scroll X and Scroll Y adds extra headers and footers in the body and messes up my table

TariqSendi

Link to test case: The page with data tables is behind a login, I am unable to share it. but I've attached the file that generates the table
When I do ScrollX or ScrollY or both I get this issue where I have two table headers, the original and the second one which is generated and is empty. I need to be able to disable this from happening.

$(document).ready( function () {

$('#table_class').DataTable({

    "scrollX": true,
    "scrollY": "calc(100vh - 300px)",
    "paging":   false,
    "order": [[ 0, "desc" ]],
    "responsive": true,

    }
});

});

colin

I took your code and create a test case here, and I'm not seeing the problem. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

TariqSendi

Here is a test case where the issue is replicated,

https://asset.creo.casa/test.php

allan

Thanks for the link. It is this CSS that is causing the issue:

.h_cell {
  text-align: center;
  padding: 4px !important;
  border: none !important;
}

Add:

div.dataTables_scrollBody .h_cell {
  padding: 0 4px !important;
}

to correct that.

Allan

TariqSendi

Thank you, this somewhat solved the issue.
I had to rework my JS scripts to target the visible footer to add the sum.
Because otherwise, it adds the sums in the 'div.dataTables_scrollBody' footer.