[HTML] Liste mit fixem Header erstellen

Gawan

kennt sich schon aus
Liste mit fixem Header erstellen

Hallo zusammen,

nach mehreren (erfolglosen) Anläufen versuche ich es jetzt nochmal.

Ich habe hier eine dynamisch generierte Liste http://gawan.mine.nu

Ich würde die Liste jetzt gerne so umbauen dass der Header - also die Zeile mit den Spaltennamen - fix stehenbleibt und der Zeileninhalt (in einem fixen Rahmen) SCROLLBAR ist.
Wichtig dabei ist, dass der Header und die darunterliegende Spalten mitsammen verbunden bleiben und auch in dem Fall, dass die Texteinträge in den Spalten breiter werden und somit die Spaltenbreite verändert wird, nicht komplett auseinander laufen.

Perfekt wäre eine Lösung mit CSS, da ich für eine Ausgabe am Drucker die Scrollfunktion in einem Stylesheet abschalten möchte. ;)

Bin für jeden Hilfe dankbar !! :D

lG
Gawan
 

Astrominus

Administrator
Teammitglied
Ich würde Dir dafür folgendes empfehlen:

HTML:
<div style= "width:200px; height:150px; overflow:auto; border:1px solid #840; margin:1em;">
Inhalt
</div>
Mit Width und Height legst Du die Grösse des Div-Containers fest. overflow:auto bedeutet, das Scrollbalken erscheinen sobald der Inhalt größer als die angegebenen Werte ist.
 

Gawan

kennt sich schon aus
Ich habe jetzt die Tabelle an eine Vorlage angepasst - es sieht im IE6.0 auch genauso aus wie ich mir das vorstelle.

Pure CSS Scrollable Table with Fixed Header

Problem ist, dass es im IE7.0 und auch im Firefox wieder komplett anders aussieht - speziell wenn die Einträge in den Spalten länger werden als geplant.

Pure CSS Scrollable Table with Fixed Header

Ich muss mich wohl damit abfinden dass das nicht so funktioniert wie ich will :(:(

Hat jemand eine Idee wie ich es jetzt noch schaffe dass die Seite am Drucker ohne den Scrollbalken angezeigt wird, also die komplette Liste ?

Danke
Gawan
 
Zuletzt bearbeitet:

Threepwood

UnBunt.
Moin..

da würd ich dir ein externes .css file empfehlen, dass du im Dokument selbst als Druck-File angibst.


Quick'n'dirty:
PHP:
<style type="text/css">
@import url(style.css) screen; // bildschirmausgabe
@import url(style_d.css) print; // druckausgabe
</style>

In deinem Dokument nimmst du folgendes:
Code:
<div class="tab_1"> Inhalt </div>

In style.css:

Code:
.tab_1 {
width:200px; 
height:150px; 
overflow:auto; 
border:1px solid #840; // 840?
margin:1em;
}

In style_d.css:

css:

Code:
.tab_1 {
width:200px; 
border:1px solid #840;
margin:1em;
}

Weiteres auf de.selfhtml.org ;)

LG
 
Oben