View Full Version : TH header not aligning with TD cells in IE

09-01-2011, 01:53 PM

I have a jQuery Datatable and my header th cells are not aligning with my td cells in Internet Explorer. I have played around with the CSS for multiple days but I cannot figure out what the solution is?? I turned off sorting and the problem got even worse; the gap at the end was one cell larger than the row below! I don't know what to do or how to fix it because I have tried everything that I would know how to do and I've spent countless hours on what seems to be a silly problem.

It looks great in Firefox but there's something that IE really doesn't like here.

I've searched the forums high and low but nothing addresses my specific problem. I have made very little modifications to the tables. In fact, before I made ANY mods, I just entered my data and this problem started happening. Can somebody that knows more about this table please help me????

09-01-2011, 06:58 PM
Lines up perfect in my IE8 and 9

09-01-2011, 07:06 PM
In my IE browser & and on my customer's browser, this is what you get:
And this isn't the worst of it. Depending on the content of the cells below, sometimes it creates a 1 inch gap. I don't understand this.

09-01-2011, 08:39 PM
version? (it matters, a lot)
And which browser and browser version is your client using?

09-02-2011, 01:33 AM
some parts of your headers use <p>tags you should make them uniform. the second header throws out because of the amount of text throws it onto 4 lines (on my screen) this is one of the things that made me hate tables. if you set widths for your headers ,or shorten the text a little in that header. either should help i think. Did i mention i hate tables :)

09-02-2011, 02:35 AM
Such type of trouble happens when IE is set to compatibility mode by the user.

Either OPs or Domedia's IEs are set to compatibility mode and hence one of sees the problem and the other doesnt.

Sorry I dont have IE at home and hence cannot verify either way.



will alert the mode IE is currently using


<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

forces IE into standards mode, irrespective of users setting

09-03-2011, 07:39 PM
I am using IE 9 so the browser version doesn't seem to play into the problem.

Thanks for the suggestions though. I actually contacted the original programmer of this datatable and asked him for help.

He said the issue is with how DataTables are calculating the "optimum" column widths to use for the table. When it does this, it tries to find the longest string in each column and sum them all up to create the "worst" case table - however what it should really be doing is using the width of the string rather than the length. For example "mmm" is wider than "iiii"! I did put this into a version of DataTables but it was just so slow in IE that it was unusable.

I don't really understand but he gave me a way to "work around" this issue. He said to add the code below to my DataTables initialisation:

"aoColumnDefs": [
{ "sContentPadding": "mmm", "aTargets": ['_all'] }

I'm still working on it so I'll let you know how it goes in case anyone else runs into this issue.