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

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

TariqSendiTariqSendi Posts: 3Questions: 1Answers: 0
edited January 13 in Free community support

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,

    }
});

});

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 14,158Questions: 1Answers: 2,399

    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

  • TariqSendiTariqSendi Posts: 3Questions: 1Answers: 0

    Here is a test case where the issue is replicated,

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

  • allanallan Posts: 55,815Questions: 1Answers: 8,815 Site admin
    Answer ✓

    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

  • TariqSendiTariqSendi Posts: 3Questions: 1Answers: 0

    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.

Sign In or Register to comment.