Scrollable datatable: header is not alligned with data

Scrollable datatable: header is not alligned with data

FortegaFortega Posts: 4Questions: 0Answers: 0
edited April 2012 in General
Check http://jsfiddle.net/kRQcP/

Did I do something wrong here? Why is the header of the table not in line with the data?

Replies

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    There are two things that spring to mind here:

    1. Sub-pixel rounding
    2. Not enough space for the content

    If I modify your example a little bit to force the content to take into account a bit of padding, the alignment works as expected: http://jsfiddle.net/kRQcP/4/ . However, I realise that this is not an ideal solution - I've bookmarked this discussion to have a look at it further and see if I can improve the alignment that DataTables does. Thanks for the example!

    Regards,
    Allan
  • FortegaFortega Posts: 4Questions: 0Answers: 0
    Hi Allan,

    thanks for the quick response! This is indeed not an ideal solution, but it's already better than mine.
    Please let me know when you did some improvements here.

    thanks,

    Bart
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    So I'm spent a bit of time looking at this and trying to understand what is going on, and it would appear that the issue is caused by the border-collapse:collapse property. When set the calculations for the widths of the cells in the two tables appears to differ, resulting in the misalignment. At some point I'd like to poke through the webkit source code to understand why this is happening and see if I can resolve it in user-space, however until then, the way to get perfect alignment is to remove the border-collapse:collapse option (or set it to separate). To get the collapsed effect you can do the following in CSS:

    [code]
    div.dataTables_wrapper table {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    }
    div.dataTables_wrapper table th,
    div.dataTables_wrapper table td {
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-bottom: none;
    }
    div.dataTables_wrapper div.dataTables_scrollHead table {
    border-bottom: none;
    }
    [/code]

    Regards,
    Allan
  • FortegaFortega Posts: 4Questions: 0Answers: 0
    Great, thanks!
This discussion has been closed.