Tabellen-Kopfzeile fixieren und kopieren

[Linuchs]

Hallo Fred,

ich finde die Lösung von Jürgen B ganz gelungen.

Nunja, mit festen Spaltenbreiten ...

div.scrollcontainer div table thead th { width:100px; }  
div.scrollcontainer div table tbody td { width:100px; }

Ich versuche, nachdem die Original-Tabelle aufgebaut wurde, die Breiten auf die fixierte Tabelle zu übertragen:

window.addEventListener('DOMContentLoaded', function ( ) {
  alert( "[" +document.getElementById( "tr_original" ).getElementsByTagName( "td" )[0].style.paddingLeft +"]" );
  // alle Zellen der Zeile kopieren
  document.getElementById( "tr_kopie" ).innerHTML = document.getElementById( "tr_original" ).innerHTML;
  // alle Zellenbreiten kopieren
  for ( i=0; i<document.getElementById( "tr_original" ).getElementsByTagName( "td" ).length; i++ ) {
    document.getElementById( "tr_kopie" ).getElementsByTagName( "td" )[i].style.width
    = ( document.getElementById( "tr_original" ).getElementsByTagName( "td" )[i].clientWidth -10 ) +"px";
  }
});

Dabei ergibt sich das Problem, dass die Original-Breite nicht 1:1 kopiert werden kann, denn clientWidth enthält Daten und padding, ist aber nur-lesbar. style.width ist wiederum beim Original nicht greifbar.

Da ich im Original 5px padding habe, ziehe ich 10px ab. Aber dieser Wert müsste von der betreffenden Zelle gelesen werden und nicht im javascript-Programm "festgezurrt". Die Frage nach style.paddingLeft ergibt NULL.

Linuchs