Table border issues (w and w/o FixedColumns)

chmielot

I'm using Firefox 10 and Chrome 18 on a Mac.

Here is my debug report:
http://debug.datatables.net/ewojon

This is my sample:
http://www.nordwind-db.com/datatabletest.html

This is what I see in both browsers with FixedColumns active:
http://img191.imageshack.us/img191/69/datatablesbug.png

When FixedColumns is not active, I still have issues with table borders which are shifted by one pixel sometimes:
http://img543.imageshack.us/img543/6549/datatablesbugborders.png
This effect is much worse in Chrome, where borders are shifted up to 5-6 pixels.

Please tell me, what am I doing wrong here?

allan

Oh dear - this one is going to be a cracker. I'll get a coffee and try to figure out what is going on :-)

Allan

allan

Without FixedColumns:
This is because of the use of border-collapse: collapse - see this post: http://datatables.net/forums/discussion/9350/scrollable-datatable-header-is-not-alligned-with-data/p1#Item_4 . I'll post an FAQ on that shortly.

With FixedColumns:
Easy way to fix it - add: table-layout: fixed; to your CSS for table tags. This forces the rendering engine to use the widths that DataTables calculates for your table, and that allows everything to align correctly.

I must confess that I actually don't know how to make it align correctly without a fixed layout at the moment. As far as I can see, DataTables and FixedColumns are assigning the widths that I would expect to the cells, and they match exactly on the header and footer, but the browser it resizing them due to the content in each - completely overriding the sizes, and since the content is different in each, it resizes them differently.

Thanks very much for the example - I think I'm going to have to dedicate a bit of time to figuring this one out exactly and seeing if there is a way of doing it without fixed layout.

Regards,
Allan

allan

Heh - sorry about the inner monologue... but I've got it fixed now :-). The problem was that I was applying the outer width to cells where I should have been applying the inner width...

Anyway - I've committed the fix and you can grab it from http://datatables.net/download - the FixedColumns 2.0.4.dev nightly specifically. This change will be in the next FixedColumns release.

Thanks again for providing a sample allowing me to track this down!

Regards,
Allan

chmielot

Hi allan,

thank you very much for fixing this so quickly! It actually fixes the issues in my real world table. I still need to check on the border-collapse attribute, though.

I'm sure you'd love to have another non-working example ;), using nightly this time.
http://www.nordwind-db.com/datatabletest2.html

I know, the HTML isn't pretty, but this is how it comes out of my PHP code.

Thank you in advance, allan, very good work!

allan

Oh man - lol. I'm going to have to come back to this one - hopefully over the weekend I'm afraid, as I expect that will take a fair bit of time to get to grips with as well.

Thanks for the second test case (I think... :-) ).

Allan

chmielot

Hi Allan,

can I help you somehow to track this down?

Best regards,
Thomas

allan

Ah sorry - I totally failed to look at this over the weekend. I'll try to do so in the next couple of days.

Unfortunately I don't actually have any idea what could be causing the problem this time, so I'm going to have to debug it the hard way (make a change and see what happens...). The frosting point is making the width calculation table visible and see what DataTables thinks it is doing - _fnCalculateColumnWidths if you are interested.

Allan

allan

Got it :-). The problem was that FixedColumns wasn't taking into account that there was a TH element in the table's body - it was only reading widths from the TD elements, which caused the sizes calculated to be shifted by 1 in this case, and ends up just looking completely broken.

I've just committed a suitable fix and you can again pick that up from the nightly.

Thanks again for your examples - it really makes fixing and fixing the bugs that much easier (or indeed possible :-) ).

Regards,
Allan

chmielot

Hi Allan,

I'm very sorry for not answering earlier. Sorry I couldn't help you, but at least my examples helped finding the problem a bit. I just updated by second example to use the nightlies but still have issues in both Chrome and Firefox. Don't you?
http://img193.imageshack.us/img193/4971/datatablesscreen3.png

allan

It should work okay if you add cellspacing="0" to your table. I'm afraid that looks like a limitation in how the column widths are calculated - perhaps a bit like the border-collapse:collapse option.

Allan