Tabelle: erste zeile fest, rest scrollbar

[Reality]

Hallo,

hat jemand eine Ahnung, wie ich auf einer HTML-Seite eine Tabelle einfügen kann, von der die erste Zeile ("Überschrift") fest ist, und der rest der Tabelle sich nach unten scrollen lässt?

Mfg,

Reality

[baba007]

2 Frames ? oder einen eingebetteten iframe

[Reality]

Naja, das Problem bei der Sache ist, dass die "Überschrift" die gleichen Spaltenbreiten braucht, wie der Rest der Tabelle. Die Breiten kann man aber auch nicht fest machen, sie müssen dynamisch bleiben, weil der Inhalt der Tabelle immer ein anderer ist....

[baba007]

ich habe auch nicht angenommen, dass die frage vollständig war

schau mal hier

[FMG]

... oder auch http://de.selfhtml.org/html/tabellen/aufbau.htm#kopf_koerper_fuss

[Reality]

hmm... irgendwie kann ich damit nix anfangen, hast du auch wirklich verstanden, wie ich das meine??

Tabelle:

|------------------------------------|

| Überschrift fest .........................|

|------------------------------------|

|...............................................__|

|Rest der Tabelle scrollbar.............|^|

|.............................................. | |

|.............................................. |_|

|.............................................. |v|

|------------------------------------|

So ungefähr. besser konnt ichs jetzt auch nicht darstellen ;-)

[baba007]

tabellenkopf kommt in einen fixierten div -> über CSS regelst du die position des divs

rest kommt in den anderen div

schau dir doch das beispiel an .

bei älteren Browsern scroll bitte zum Workaround

[bmg4ever2]

also ich verstehe nicht gazn, wie ein fixiertes div als kopf hier helfen soll. dann bleibt die breite ja nicht dynamisch, da die Kopfzeilenbreite nicht mehr von der Breite des Haupttabellenbereichs abhängig ist. Mal ganz unabhängig davon, dass position:fixed im IE nicht unterstützt wird.

Um es mal ganz einfach zu machen. Es gibt eine einzelne CSS-Property dafür:

overflow:scroll.

http://www.css4you.de/overflow.html

Einfach der entsprechende <tr> eine feste Höhe zuweisen und dem <td> dann overflow:scroll als eigenschaft geben.

Nun hast du eine Scrollbar in dem Tabellenfeld unter der Kopfzeile.

[*I C Q*]

Nun hast du eine Scrollbar in dem Tabellenfeld unter der Kopfzeile.

Wenn ich Ihn richtig verstanden habe, will er nicht ein einzelnes Tabellenfeld scrollbar haben, sondern alle Zeilen hinter dem Tabellenkopf. Da ich kürzlich an einem ähnlichen Problem gebastelt hab (bei mir musste zusätzlich auch noch die erste Spalte fixiert sein und dabei aber alles mitscrollen), bin ich über diesen Artikel gestolpert.

Ist in meinen Augen die fehlertoleranteste Lösung, die ich gefunden habe, wenn auch etwas unschön. Der Trick hierbei ist, dass die Tabelle mehrfach in unterschiednlichen Frames geladen und gerendert wird und somit die Breiten und Höhen gleich sind. Da ich das Dingen nur intern benutze und mir Bandbreite und Ladezeit dabei egal sein können, war's für mich die passende Lösung.

btw. Ein overflow:scroll oder overflow-y:scroll auf TBODY (quasi die "Wunschvariante") wird vom IE nicht unterstützt, wohl aber vom Mozilla.

HTH,

ICQ

[mOSSpOWER]

Hi,

also ich hatte genau das Problem. Ich habe in den letzten zwei Wochen einen Code-Generator geschrieben, der nach Propertyfile-Konfigureation genau dies macht (und auch gleich JS-Sortierung anbietet ... optisch aufbereitet). Ich habe das Problem (gleiche Spaltenbreite)damit gelöst, dass ich im tbody und im thead jeweils divs mit Tabelle mit gleicher Spaltenbreite habe (außer der letzten ... wenn Scrollbalken, dann - 16 Px ... funzzt im Firefox und MSIE .. andere Browser brauche ich net, daher weiß ich auch nicht ob es da funktioniert. Btw ... alles mit overflow: auto ... funzzt wunderbar .. die Liste kann man auch aufklappen, dann werden die 16 Pixel wieder (mit JS) dazuaddiert und alles ist weiterhin pixelgenau untereinander.

[oneside]

Hier mal ein Lösungsvorschlag:

<table width="500"  border="1" align="left" cellpadding="2" cellspacing="3">

  <tr> 

    <td width="394" bgcolor="#C0C0C0">Text</td>

    <td width="106" bgcolor="#C0C0C0">Aktion</td>

  </tr>

  <tr> 

    <td colspan=2>

<div style="width: 100%; height: 100; overflow: auto;"> 

<table width=100% border=1 cellpadding="0" cellspacing="0">

<tr><td>Text Text Text Text Text Text Text Text TextText Text Text<br></td><td>Text scrollbar<br></td></tr>

<tr><td>Text Text Text Text Text Text Text Text TextText Text Text<br></td><td>Text scrollbar<br></td></tr>

<tr><td>Text Text Text Text Text Text Text Text TextText Text Text<br></td><td>Text scrollbar<br></td></tr>

<tr><td>Text Text Text Text Text Text Text Text TextText Text Text<br></td><td>Text scrollbar<br></td></tr>

<tr><td>Text Text Text Text Text Text Text Text TextText Text Text<br></td><td>Text scrollbar<br></td></tr>

<tr><td>Text Text Text Text Text Text Text Text TextText Text Text<br></td><td>Text scrollbar<br></td></tr>

<tr><td>Text Text Text Text Text Text Text Text TextText Text Text<br></td><td>Text scrollbar<br></td></tr>

<tr><td>Text Text Text Text Text Text Text Text TextText Text Text<br></td><td>Text scrollbar<br></td></tr>

<tr><td>Text Text Text Text Text Text Text Text TextText Text Text<br></td><td>Text scrollbar<br></td></tr>

<tr><td>Text Text Text Text Text Text Text Text TextText Text Text<br></td><td>Text scrollbar<br></td></tr>

<tr><td>Text Text Text Text Text Text Text Text TextText Text Text<br></td><td>Text scrollbar<br></td></tr>

<tr><td>Text Text Text Text Text Text Text Text TextText Text Text<br></td><td>Text scrollbar<br></td></tr>

</table>

</div> 

    </td>

  </tr>

</table>