IE7 CSS table header borders not aligning to tbody cells

Question

I have a requirement to have a scrolling table in both x and y axis.

I achieved this by cloning the existing table header into a new table with jQuery.

I have mocked the issue here:

http://jsfiddle.net/PaQne/1/

In IE7 the borders of the cloned thead cells do not align with the parent thbody cells even though the CSS is the same.

Is there a fix for this?

I appreciate that this is not best practice and IE7 is a dying browser but it is a client requirement.

Answer 1

Removing this rule:

.grid-cntr .data-grid thead {
    display: none;
}

made the borders align. But obviously you want to hide the thead on IE7 too, so let's use an hack!

.grid-cntr .data-grid thead {
    display: none;
    *display:block; /* target IE7 and below only */
}

Then, add this rule:

.grid-cntr .data-grid {
    *margin-top:-32px;
}

Working demo

Otherwise, if you want to keep your code "clean", you can use conditional comments.

Add this code to your head section, after the normal css:

<!--[if lte IE 8]>
<style>
.grid-cntr .data-grid thead { display:block; }
grid-cntr .data-grid { margin-top:-32px; }
</style>
<![endif]-->

---

Anyway, you're using :first-child and :last-child selectors, but check this compatibility table:

1. last-child won't work on IE7 and 8 at all
2. first-child works only on static elements, not on generated contents

Try to use classes instead, if you need full compatibility with IE7+.

There's also ie9.js which does a great job for CSS3 selectors on older IE versions.

---

Then you've this rule:

.data-grid td:first-child {
    border-width: 1px 0 0 0;
}

are you aware that this rule will overwrite that on the last row?

.data-grid tr:last-child td {
    border-width: 1px 1px 0 1px;
}

Maybe you want to use

.data-grid td:first-child {
    border-width: 1px 0 0 0 !important;
}