Today I loose my day on a specific IE7 bug:
it doesn’t take in account fixed height and overflow in table structure.

The concept is to use the thead tag (the tfoot tag if needed) for the fixed part and the tbody tag for the scrolling part:

<table>
  <thead>
  </thead>
  <tbody>
  </tbody>
</table>

With firefox 2 you just need this CSS code:

table>tbody {
  overflow: auto;
  height: 280px;
  overflow-x: hidden;
}

Simplicty, efficacity.

With IE7 you need to cheat and to add an extra div tag which support the overfllow rule. The div tag height must large enough to contain the table: thead height + tbody forced height.

<div class="tableContainer">
  <table>
    <thead>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

The CSS rules are now more complex:

div.tableContainer {
  width: 90%;       /* table width will be 99% of this*/
  height: 320px;    /* must be greater than tbody*/
  overflow: auto;
  margin: 0 auto;
}

table {
  width: 97%;  /*100% of container produces horiz. scroll in Mozilla*/
  border: none;
  border-spacing: 0px;
  background-color: transparent;
}

table>tbody {
  overflow: auto;
  height: 280px;
  overflow-x: hidden;
}

With that code every tr tag height is set to 280px on IE7, we need an extra rule:

table>tbody tr {
  height: auto;
}

But the thead is always glue with the tbody. We need to make it relative:

table>thead tr {
  position:relative;
  top: 0px;/*expression(offsetParent.scrollTop); IE5+ only*/
}

This is the fifth implementation of the day to fix this bug. I don’t know how to thanks Microsoft to make me earn money on customers. With Internet Explorer I don’t need to buy a Wii the improve my mind.

---

Possibly related posts: (automatically generated)

• Hiding multiple rows in a TABLE using TBODY