[HTML] Liste mit fixem Header erstellen

[Gawan]

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 !!

lG
Gawan

 

[Astrominus]

Ich würde Dir dafür folgendes empfehlen:

<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]

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

 

[Threepwood]

Moin..

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


Quick'n'dirty:

<style type="text/css">
@import url(style.css) screen; // bildschirmausgabe
@import url(style_d.css) print; // druckausgabe
</style>

In deinem Dokument nimmst du folgendes:

<div class="tab_1"> Inhalt </div>

In style.css:

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

In style_d.css:

css:

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

Weiteres auf de.selfhtml.org

LG