Tabelle ohne Titelzeile scrollen

[JürgenB]

Hallo,

ich möchte bei einer Tabelle nur den tbody scrollen, der thead-Bereich soll stehen bleiben. Leider führten mich meine Recherchen nur auf Beispiele, die nicht funktionieren. Das Scrollen sollte in allen aktuellen Browsern funktionieren (IE>=9 reicht).

Hat von Euch jemand eine Idee dazu?

Gruß, Jürgen

[Matze]

Hallo!

Leider führten mich meine Recherchen nur auf Beispiele, die nicht funktionieren.

Was hast du denn bereits versucht was "nicht funktionierte"?
Ich bin mir grad nicht sicher wie sich position: fixed; bei thead verhält, aber spontan würde ich da ansetzen.

Grüße, Matze

[JürgenB]

Hallo Matze,

Hallo!

Leider führten mich meine Recherchen nur auf Beispiele, die nicht funktionieren.

Was hast du denn bereits versucht was "nicht funktionierte"?

ich wollte jetzt keine Linkliste auf nicht funktionierende Lösungen verlinken sondern dachte, dass jemand weiß, wie es geht.

Ich bin mir grad nicht sicher wie sich position: fixed; bei thead verhält, aber spontan würde ich da ansetzen.

und dann die Tabelle scrollen oder nur tbody?

Hier meine Idee, die im IE9 nicht funktioniert:

	.scroll { height:30em }  
  .scroll thead { position: absolute }  
  .scroll tbody { height: 28em; overflow-y: scroll; display: block; margin-top:2em }

<table class="tabelle sortierbar scroll">  
  <thead>  
    <tr>  
      <th width=220>hhh</th>  
      <th width=150>hhh</th>  
      <th width=150>hhh</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <td  width=220>bbb</td>  
      <td  width=150>bbb</td>  
      <td  width=150>bbb</td>  
    </tr>  
      ...  

Gruß, Jürgen

[Matze]

Hallo!

ich wollte jetzt keine Linkliste auf nicht funktionierende Lösungen verlinken sondern dachte, dass jemand weiß, wie es geht.

Zumindest deine bisherigen Versuche hättest du mit unterbringen sollen.

<table class="tabelle sortierbar scroll">

<!-- ... -->

  
Ah, genau das.  
  
Du musst deine Tabelle in ein umschließendes Element packen. Denn overflow steuert das Verhalten bei Kindelementen die aus den Maßen des Elements ragen. Die Elemente thead, tbody usw. scheinen aber zum table-Element zu gehören und nicht als "Kinder" zu zählen.  
  
Hier ein [Beispiel](http://jsfiddle.net/KVC5h/2/) das deinen Ansprüchen genügen sollte.  
  
Grüße, Matze

[Gunnar Bittersmann]

@@Matze:

nuqneH

Du musst deine Tabelle in ein umschließendes Element packen.

Nö. Es geht ohne.

Qapla'

[Matze]

Hallo!

Nö. Es geht ohne.

Gefällt mir ganz einfach nicht! ;)

Grüße, Matze

[JürgenB]

Hallo Matze,

Hier ein Beispiel das deinen Ansprüchen genügen sollte.

das funktioniert (auch im IE9), wenn die Tabele ganz oben auf der Seite steht, und unter der Tabelle kein Inhalt mehr ist. Wenn die ganze Seite gescrollt werden muss, bleibt der Tabellenkopf (position:fixed) stehen.

Gruß, Jürgen

[Matthias Apsel]

Om nah hoo pez nyeetz, JürgenB!

das funktioniert (auch im IE9), wenn die Tabele ganz oben auf der Seite steht, und unter der Tabelle kein Inhalt mehr ist. Wenn die ganze Seite gescrollt werden muss, bleibt der Tabellenkopf (position:fixed) stehen.

ungetestet: Gib dem Tabllenkopf position: absolute; und dem umgebenden Element position: relative; damit der Tabellenkopf weiß, wonach er sich richten soll.

Matthias

[JürgenB]

Hallo Matthias,

ungetestet: Gib dem Tabllenkopf position: absolute; und dem umgebenden Element position: relative; damit der Tabellenkopf weiß, wonach er sich richten soll.

ich habe jetzt dem thead ein position:absolute spendiert, ein position:relative beim umgebenden Div scheint nicht nötig zu sein. So scheint es zu funktionieren. Hier mal der Link zu meiner Testseite:

http://www.j-berkemeier.de/Test/Test_scrollbare_Tabelle.html

Die Lösung hat jetzt noch zwei Nachteile:

• Alle Breiten müssen fest vorgegeben werden.
• Die Höhe des thead muss bekannt sein.
• Die th im thead müssen eine Hintergrundfarbe haben, sonst schimmert die Tabelle beim Scrollen durch.

Der Test in Opera, Crome und Safari steht noch aus, aktueller FF, IE9 und IE unter Windows Phone 7.8 arbeiten wie gewünscht.

Gruß, Jürgen

[Matthias Apsel]

Om nah hoo pez nyeetz, JürgenB!

Die Lösung hat jetzt noch zwei Nachteile:

• Alle Breiten müssen fest vorgegeben werden.

Die Tabellenspalten ja: weil du den Kopf mit position: absolute so breit machst, wie der Inhalt es erfordert.
Die Breite des umgebenden divs kannst du ebenso auf die Breite des Inhalts bestimmen (shrink to fit). Etwa durch display: inline-block;

Der Test in Opera, Crome und Safari steht noch aus,

sieht gut aus.

Matthias

[JürgenB]

Hallo Matthias,

Die Tabellenspalten ja: weil du den Kopf mit position: absolute so breit machst, wie der Inhalt es erfordert.
Die Breite des umgebenden divs kannst du ebenso auf die Breite des Inhalts bestimmen (shrink to fit). Etwa durch display: inline-block;

gute Idee.

Der Test in Opera, Crome und Safari steht noch aus,

sieht gut aus.

Danke.

Leider Funktioniert jetzt mein Tabellensortierer nicht mehr, bei Klick auf die Spaletnüberwschrift wird zwqr sortiert, die Überschrift landet dann aber "irgendwo weiter oben". Jetzt muss ich erst diesen Fehler lokalisieren. Denn das setzen eines onclick oder das Anhängen eines Zeichens an die Überschrift dürfte deren Position ja nicht ändern ...

Gruß, Jürgen

[JürgenB]

Hallo,

ich habe den Fehler eingrenzen können: Wenn mit einem onlock auf th sein Inhalt verändert wird, springt das th nach oben, anhängig von der Scrollposition. Siehe das aktualisierte Beispiel:

http://www.j-berkemeier.de/Test/Test_scrollbare_Tabelle.html

erst einige Zeilen Scrollen, dann auf Spaltenüberschrift klicken.

Im IE 9 tritt der Fehler nicht auf, ich habe ihn nur im FF beobachtet.

Hat jemand eine Idee, woran das liegen könnte?

Gruß, Jürgen

[Worf]

Hallo,

-%- Wenn mit einem onlock auf th sein Inhalt verändert wird, springt das th nach oben, anhängig von der Scrollposition.

Ich kann den Effekt ebenfalls nachvollziehen (im Firefox), eine Erklärung dafür habe ich jedoch nicht.

Das Einpacken des "scroll"-div-Container in ein weiteres div-Element mit "position: relative" führte bei mir zum gewünschten Ergebnis:

div.scrollcontainer { position:relative; }  
div.scroll table thead { position:absolute; left:1px; top:0; }

<div class="scrollcontainer">  
		<div class="scroll">  
<!-- .. Tabelle .. -->  
		</div>  
</div>

Beide Versionen zeigen jedoch im Safari ein Artefakt: Die Tabellenüberschrift ragt über die gesamte breite des div-Containers, über den Scrollbalken.

Gruss,
Worf

[JürgenB]

Hallo Worf,

div.scrollcontainer { position:relative; }

div.scroll table thead { position:absolute; left:1px; top:0; }

>   
> ~~~html

<div class="scrollcontainer">  

> 		<div class="scroll">  
> <!-- .. Tabelle .. -->  
> 		</div>  
> </div>

das sieht gut aus, vielen Dank. Ich habe es mal hochgeladen, mit Sortierer:

http://www.j-berkemeier.de/Test/Test_scrollbare_Tabelle.html

Beide Versionen zeigen jedoch im Safari ein Artefakt: Die Tabellenüberschrift ragt über die gesamte breite des div-Containers, über den Scrollbalken.

das werde ich mir heute Abend mal ansehen, auf diesem Rechner habe ich nur FF und IE 9

Gruß, Jürgen

[Matthias Apsel]

Om nah hoo pez nyeetz, JürgenB!

Beide Versionen zeigen jedoch im Safari ein Artefakt: Die Tabellenüberschrift ragt über die gesamte breite des div-Containers, über den Scrollbalken.

Auch dagegen hilft ein shrink-to-fit. Etwa wieder display:inline-block;

Matthias

[JürgenB]

Hallo Matthias,

Beide Versionen zeigen jedoch im Safari ein Artefakt: Die Tabellenüberschrift ragt über die gesamte breite des div-Containers, über den Scrollbalken.

Auch dagegen hilft ein shrink-to-fit. Etwa wieder display:inline-block;

bei mir sieht es im Safari und im Crome gut aus, nur im Opera ist der Abstand zwischen Kopfzeile und Inhalt zu groß, und beim Scrollen verschwindet die Kopfzeile ganz, wenn der Inhalt am oberen div-Rand ankommt.

Gruß, Jürgen

[Matthias Apsel]

Om nah hoo pez nyeetz, JürgenB!

nur im Opera ...

Gunnars Lösung sieht mit ein wenig CSS-Fummelei auch vernünftig aus, benötigt keine zusätzlichen div-Elemente und ist deshalb vorzuziehen.

table {  
   border-collapse: collapse;  
   border-bottom: 1px solid black;  
   box-shadow: -1em 0 white inset;  
}  
thead { display: block;}  
th { width: 100px; }  
  
tr { border: 1px solid black; }  
thead tr { background: gray; }  
  
tbody { display: block; max-height: 10em; overflow-y: scroll }  
tbody tr { border-bottom-style: none; }  
tbody tr:first-child { border-top-style: none; }  
  
td { width: 100px; background: lightgray;}			  
th:first-child, td:first-child { border-right: 1px solid black; }  

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

Om nah hoo pez nyeetz, JürgenB!

nur im Opera ...

Gunnars Lösung sieht mit ein wenig CSS-Fummelei auch vernünftig aus, benötigt keine zusätzlichen div-Elemente und ist deshalb vorzuziehen.

Ich hätte aufmerksamer lesen sollen. Du schriebst bereits, dass das im IE9 nicht funktioniert. Für das Opera-Problem habe ich keine (schicke) Lösung.

Du könntest die Tabelle so lassen, wie sie ist und ein Element, das so aussieht wie der Tabellenkopf, absolut positioniert an die richtige Stelle legen. Aber toll ist das wirklich nicht.

Matthias

[JürgenB]

Hallo Matthias,

... Für das Opera-Problem habe ich keine (schicke) Lösung.

es werden einige nicht gerne hören, aber wenn es im Opera nicht optimal aussieht, kann ich damit leben. Die Verbreitung ist gering, und will Opera nicht auf webkit umstellen?

Gruß, Jürgen

[Gunnar Bittersmann]

@@JürgenB:

nuqneH

ich möchte bei einer Tabelle nur den tbody scrollen, der thead-Bereich soll stehen bleiben. […] Das Scrollen sollte in allen aktuellen Browsern funktionieren […].
Hat von Euch jemand eine Idee dazu?

Eine Zeitreise.

In der Gegenwart ist der Bug des Nichtfunktionierens auch in Firefox eingebaut.

Andere Idee: thead, tbody (und ggfs. tfoot) auf 'display: block' setzten. Dann müssen allerdings die Breiten der Tabellenzellen gesetzt werden und die Rahmen fallen auch nicht zusammen.

Qapla'

[Matze]

Hallo!

Andere Idee: thead, tbody (und ggfs. tfoot) auf 'display: block' setzten. Dann müssen allerdings die Breiten der Tabellenzellen gesetzt werden und die Rahmen fallen auch nicht zusammen.

Ziemlich umständlich finde ich. Dann könnte man auch gleich eine Tabelle mit CSS "simulieren".
Ein umschließendes Element finde ich in dem Fall akzeptabler.

Grüße, Matze

[JürgenB]

Hallo Gunnar,

Andere Idee: thead, tbody (und ggfs. tfoot) auf 'display: block' setzten. Dann müssen allerdings die Breiten der Tabellenzellen gesetzt werden und die Rahmen fallen auch nicht zusammen.

das funktioniert nicht im IE (9), da die Höhenangabe für tbody auf alle tr angewendet wird. Die Tabelle sieht dann scheußlich aus und gescrollt wird auch nicht, da tbody ja die volle Höhe annimmt.

Gruß, Jürgen

[Micha]

Hallo JürgenB,

Hat von Euch jemand eine Idee dazu?

Nein, aber vielleicht hilft Dir Pure CSS Scrollable Table with Fixed Header weiter?

Schöne Grüße
Micha

[JürgenB]

Hallo Micha,

Nein, aber vielleicht hilft Dir Pure CSS Scrollable Table with Fixed Header weiter?

danke für den Link. Das sieht ähnlich wie meine momentane Lösung aus. Es wird nur der thead relativ positioniert und dafür gibt es ein disolay:block.

Ich werde mal prüfen, ob hier auch der Javascript-Fehler auftritt.

Gruß, Jürgen

[JürgenB]

Hallo,

Ich werde mal prüfen, ob hier auch der Javascript-Fehler auftritt.

der Fehler tritt nicht auf, ich kann die Tabelle im FF Scrollen und Sortieren. Leider funktioniert die Seite nicht im IE 9. Auch hier wird die Tabellenhöhe von den Tabellenelementen übernommen.

Gruß, Jürgen

[JürgenB]

Hallo,

erst mal vielen Dank an die Helfer.

Leider scheint es keine einfache Lösung für das Problem zu geben. Die für mich nahe liegende Lösung - tbody mit fester Höhe und Scrollbar - scheitert an den Spezifikations- und Browser-Machern, die das wohl nicht wollten.

Daher bleibt nur die frickelige Lösung mit zusätzlichen DIVs um die Tabelle, absoluten und relativen Positionierungen, festen Höhen und Breiten, Hintergrundfarben, etc..

Im Prinzip hätte hier ein DIV gereicht, aber da ich per Javascript die Inhalte der THs im THEAD ändere, habe ich jetzt eine Lösung mit zwei DIVs um die Tabelle.

Hier mein Quelltext:

  table	{ border:1px solid black; border-spacing:0px; border-collapse:collapse }  
  table td,th { border:1px solid black; border-spacing:0px;  
                border-collapse:collapse; padding:3px }  
  table td { text-align:center; }  
  
  div.scrollcontainer { position:relative; }  
  div.scrollcontainer div { border:2px solid black; padding-top:36px;  
                            display:inline-block; height:10em; overflow-y:scroll }  
  div.scrollcontainer div table thead { position:absolute; left:2px; top:2px; }  
  div.scrollcontainer div table thead th { background-color:#ccd; height:30px }  
  div.scrollcontainer div table tbody td { background-color:#eef }  
  div.scrollcontainer div table thead th { width:100px; }  
  div.scrollcontainer div table tbody td { width:100px; }  
  div.scrollcontainer div table thead th+th { width:150px; }  
  div.scrollcontainer div table tbody td+td { width:150px; }	  

<div class="scrollcontainer"><div>  
  <table>  
    <thead>  
      <tr>  
        <th>Spalte 1</th>  
        <th>Spalte 2</th>  
      </tr>  
    </thead>  
    <tbody>  
      <tr>  
        <td>1</td>  
        <td>a</td>  
      </tr>  
      <tr>  
        <td>2</td>  
        <td>z</td>  
      </tr>  
           <!-- ... -->  
    </tbody>  
  </table>  
</div></div>  

Und hier der Link (der aber nicht ewig funktionieren wird):

Test scrollbare Tabelle

Ich habe das unter Windows 7 im IE 9, IE 10, FF, Chrome und Safari erfolgreich getestet. Im Opera ist der Abstand zwischen Kopf und Inhalt zu groß und der Kopf verschwindet beim Scrollen. Im emulierten IE 8 funktionierte es auch, im emulierten IE 7 scrollt alles. Unter Windows Phone 7.8 funktioniert es auch.

Gruß, Jürgen

[Gunnar Bittersmann]

@@JürgenB:

nuqneH

Die für mich nahe liegende Lösung - tbody mit fester Höhe und Scrollbar - scheitert an den Spezifikations- und Browser-Machern, die das wohl nicht wollten.

Wieso an den den Spezifikations-Machern? Wie kommst du darauf, sie würden das nicht wollen?

Qapla'

[JürgenB]

Hallo Gunnar,

Wieso an den den Spezifikations-Machern? Wie kommst du darauf, sie würden das nicht wollen?

weil ich dachte, tbody { height:10em; overflow-y:scroll } wäre nicht erlaubt bzw. zeigt bewusst keine Wirkung.

Gruß, Jürgen

[Gunnar Bittersmann]

@@JürgenB:

nuqneH

weil ich dachte, tbody { height:10em; overflow-y:scroll } wäre nicht erlaubt bzw. zeigt bewusst keine Wirkung.

Falsch gedacht. Aber damit bist du nicht allein, sondern die Browserhersteller sind mit dir.

Qapla'

[JürgenB]

Hallo Gunnar,

weil ich dachte, tbody { height:10em; overflow-y:scroll } wäre nicht erlaubt bzw. zeigt bewusst keine Wirkung.

Falsch gedacht. Aber damit bist du nicht allein, sondern die Browserhersteller sind mit dir.

ok, wenns keiner umsetzt heißt das nicht automatisch, das es das nicht gibt.

Gruß, Jürgen