Table body and header alignment

Table body and header alignment

adityag28adityag28 Posts: 28Questions: 6Answers: 0

Hi, please refer to the below alignment. Why is the alignment not proper?

Please help.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736

    Its a styling issue specific to your page. Without seeing the problem its hard to say what it might be. First place to start is to make sure you have all the proper Datatables styling integration files for the styling framework you are using. Looks like Bootstrap. Use the Download Builder for this. Another option might be to start with a page that contains only base Bootstrap and Datatables files then add your other components one by one until you find the issue.

    If you still need help please provide a link to your page or a test case replicating the issue so we can help debug.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • adityag28adityag28 Posts: 28Questions: 6Answers: 0
    edited March 2022

    I am using ScrollY attribute also, and I have hidden the extra header row which comes due to that?
    Can the misalignment be due to that?

    Edit: I checked after removing
    scrollY: 550,
    drawCallback: function () { // this gets rid of duplicate headers
    $('.dataTables_scrollBody thead tr').css({ display: 'none' });
    },

    It works perfect after removing this, but if I include this scrollY and removed duplicate headers the alignment is spoiled.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • adityag28adityag28 Posts: 28Questions: 6Answers: 0
    edited March 2022

    Hi, please refer to the link below. I have not created the exact replica of my problem but it contains the most.
    http://live.datatables.net/rigozito/1/edit

    In this if we expand then you will see the misalignment, the header row is not to its full width.

    And please tell why am I getting an extra thead in my system. On the example, I am not getting but in my system it is there as given below:

    The red thead is extra.

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736

    Looks like you need to add style="width:100%" as shown in this example. Updated yours with width:100% and it seems to have fixed the problem.
    http://live.datatables.net/rigozito/2/edit

    Kevin

  • adityag28adityag28 Posts: 28Questions: 6Answers: 0

    Please see my previous comment and can you please tell me why an extra table instance is created when using scrollY and its fix?

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736

    The Datatables scrolling features, scrollY, scrollX, FixedHeader, etc, clone the header to facilitate the scrolling features. What you are seeing is expected behavior.

    Kevin

  • adityag28adityag28 Posts: 28Questions: 6Answers: 0
    edited March 2022

    Firstly thank you for your responses and help.
    How do I remove the extra thead as it coming in the screenshot above?
    Is this correct?
    drawCallback: function () { // this gets rid of duplicate headers
    $('.dataTables_scrollBody thead tr').css({ display: 'none' });
    },

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736

    As I said that is expected and is created by the Datatables scrolling features. You can look at this scrollY example and see the same thing. Don't try removing it.

    Is there an issue you are trying to resolve when adding scrollY?

    Kevin

  • adityag28adityag28 Posts: 28Questions: 6Answers: 0
  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736
    Answer ✓

    Have you tried just using a CSS setting instead of using jQuery .css() in drawCallback? Looks like there are a few different options to try in the thread you linked.

    Otherwise please update your example to show the issue so we can help with offering suggestions. Without seeing it we will just be making guesses of what will fix the problem.

    Kevin

  • adityag28adityag28 Posts: 28Questions: 6Answers: 0

    This was the trick with some other changes also.
    Thank you!

Sign In or Register to comment.