thead soll bei scroll am oberen Rand fixiert werden

[Linuchs]

Moin,

es reicht mir, wenn folgendes Problem für den Firefox gelöst wird (geschlossene Benutzergruppe):

Wenn <table> aufwärts gescrollt wird, entschwindet der <thead> und die Spalten haben keine sichtbare Überschrift mehr.

Ich fixiere den thead, dabei löst er sich von der Tabelle und verliert die vorherigen Spaltenbreiten, schrumpft sozusagen.

Vor dem Fixieren lese ich also die Breiten aus, fixiere und versuche, die Breiten wieder zu setzen. Das mislingt. Genau: Die Breiten der Spalten im fixierten <thead> sind größer oder kleiner als im unfixierten:

function fixThead() {
  if( document.getElementsByTagName('thead')[0].style.position == 'fixed' ) {
    document.getElementsByTagName('thead')[0].style.position = '';
    document.getElementsByTagName('thead')[0].style.top      = '';
  } else {
    var zeile = document.getElementsByTagName('thead')[0].getElementsByTagName('tr')[0].getElementsByTagName('td');  // <tr> fuer Breite der Spalten sichern
    var breit = new Array();
    for( i=0; i<zeile.length; i++ ) {   // Breite der Spalten sichern
      breit[i]  = zeile[i].clientWidth; // ohne border
    }
    document.getElementsByTagName('thead')[0].style.position  = 'fixed';
    document.getElementsByTagName('thead')[0].style.top       = '5px';
    for( i=0; i<zeile.length; i++ ) {
      document.getElementsByTagName('thead')[0].getElementsByTagName('tr')[0].getElementsByTagName('td')[i].style.width     = (breit[i]) +'px';
      document.getElementsByTagName('thead')[0].getElementsByTagName('tr')[0].getElementsByTagName('td')[i].style.maxWidth  = (breit[i]) +'px';
      document.getElementsByTagName('thead')[0].getElementsByTagName('tr')[0].getElementsByTagName('td')[i].style.minWidth  = (breit[i]) +'px';
    }
//  alert( "Tabelle hat ["+zeile.length+"] Spalten, Spalte 2 = ["+breit[2]+"]px" );
  }  
}

Habe ich was übersehen? Oder gibt es gar eine Fertiglösung mit CSS3?

Gruß, Linuchs