Misalignment IE9> when using bordered cells.

[ravb]

I'm using datatables for a table with 100% width. Works reasonably fine with FF, Webkit and IE8 (oddly enough), but the cells' borders in the cloned header are misaligned with the rest of the table in IE9 and onward.

I ran into a similar problem with a setup concerning a static table before and had already created a sloppy, base fix for this myself using some simple jquery, but I'd prefer to use datatables (and a plugin for the fixed header) for my application.

In the end it all came down to IE's handling of subpixels, so I ended up doing some sort of browser check (those that can handle getComputedStyle and those that can't) and set up 2 basic calculations for each scenario; one using the getComputedStyle-method and the other using the basic (more widely accepted) getBoundingClientRect-method.

Are you planning to implement such a fix in the foreseeable future? (I'd do it myself, but my JS-programming isn't that great, tbh)

[DataTables]

Can you please link to a test case so I can see, debug and fix the error.

[DataTables]

Oh - btw, if you are using border-collapse: collapse - that won't work, and can't be fixed as best as I can tell. The browser algorithm changes entirely when that option is set and because the header doesn't have the same content as the body, even with exactly the same width style applied, the browser will lay it out differently. You must use border-collapse: separate;.

[ravb]

I'll set something up when I can; jsfiddle won't run for me in IE. Changing the border-collapse value doesn't matter; I already checked. I could post my fix for the static table though (works regardless of collapsed or separate borders, as far as I can remember) if you think it would help.

[DataTables]

Yup - sounds be interested to see. But would also like to see the problem in action before committing any changes, since it works in the cases I've tried so far. Hoping to do a bit of a mass tidy up of outstanding things to be fixed and release of the extensions for DataTables tomorrow if you were able to have a test case available.

[ravb]

Here's the link: http://man-met-baard.nl/tables/datatables.html

The problem mainly occurs when a horizontal scrollbar is "forced". Due to the nature of the layout, combined with the intented functionality of the datatable, a horizontal scrollbar is expected, accepted and required. The problem persists on IE8 now as well, I just noticed (my two testing platforms are at work - win7, 1280x1024 and at home - win8.1, 1920x1080).

I'll put my fix up a bit later.

[joe-meyer]

I think I'm seeing the same issue. I see it in IE8,9,10.

Here's a fiddle: http://jsfiddle.net/50x1m4bt/6/

And a picture (you may have to shrink that frame's width a bit to get it to show up, seems like the smaller the window's width the farther off it gets):

[joe-meyer]

Also, the table cells don't even have to be bordered, but it certainly makes it easier to see.

[DataTables]

Fantastic - thanks for the test case - this is it with the nightly version of FixedHeader: http://jsfiddle.net/50x1m4bt/7/ and the error is still present.

I'll try to make some time to look into it next week. It looks like it will be particularly horrible to fix - the floating header has a width of 998px applied (for my specific system, it will change between machines) using the style.width property but IE is rendering it as 819px wide :-/

[joe-meyer]

I found one solution to the problem.... http://stackoverflow.com/a/14765961/1535329

I tried out just wrapping my text in a div inside of the th tag and assigning the width to that and it seemed to clear up the issue in IE. I'm a bit out of my element with the fixedHeader code yet so if someone else wants to take a stab at implementing it that would be swell.

Resulting th html could look something like this:

<th tabindex="0" class="text-nowrap" aria-controls="DataTables_Table_0" aria-label="Part: activate to sort column ascending" rowspan="1" colspan="1">
    <div style="width: 118px;">
        Part
    </div>
</th>

[joe-meyer]

Or as the comments suggest one could simply use min-width instead of width. It seems to keep wrapping ok (at least in the case of IE).

[DataTables]

Good info that - thanks! Setting min-width and width might be the way to go here.