Tabellen-Kopfzeile fixieren und kopieren
bearbeitet von LinuchsHallo Fred,
> ich finde die Lösung von [Jürgen B](https://forum.selfhtml.org/self/2013/feb/25/tabelle-ohne-titelzeile-scrollen/1572954#m1572954) ganz gelungen.
Nunja, mit festen Spaltenbreiten ...
~~~css
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:
~~~js
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
Tabellen-Kopfzeile fixieren und kopieren
bearbeitet von dedlfixHallo Fred,
> ich finde die Lösung von [Jürgen B](https://forum.selfhtml.org/self/2013/feb/25/tabelle-ohne-titelzeile-scrollen/1572954#m1572954) ganz gelungen.
Nunja, mit festen Spaltenbreiten ...
~~~css
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:
~~~css
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