Scrollbare Tabelle

[Groudon]

Hi,

ich soll den Inhalt einer Tabelle scrollbar machen, so dass man runter scrollen kann und oben der thead stehenbleibt. Leider hab ich überhaupt keine Idee wie man sowas vernünftig implementieren soll.

Bspw. soll die Tabelle mit 200 px Höhe angezeigt werden und 100 Zeilen haben. Ich scrolle nun innerhalb dieses 200px Bereichs und oben bleiben die Spaltenüberschriften stehen.

Über Hilfe würde ich mich freuen!

Mit freundlichen Grüßen Carl

[suit]

Ein overflow: scroll im tbody reicht idR. aus, es kommt aber darauf an, welche Browser du bedienen willst.

Ansonsten gibt es z.B. noch das hier:
http://aktuell.de.selfhtml.org/artikel/javascript/scrolltabelle/

[Alexander (HH)]

Moin Moin!

Ein overflow: scroll im tbody reicht idR. aus, es kommt aber darauf an, welche Browser du bedienen willst.

Cool, auf die Idee bin ich noch gar nicht gekommen.

So'n antiker IE6 fällt natürlich auf die Nase, aber im FF 3.6  sieht das gar nicht so schlecht aus. Die Scrollbalken stecken im tbody und verdrängen damit den Tabelleninhalt teilweise, aber daran müßte man auch noch drehen können.

Alexander

[Daniel unreg]

Hallo,

Cool, auf die Idee bin ich noch gar nicht gekommen.

So'n antiker IE6 fällt natürlich auf die Nase, aber im FF 3.6  sieht das gar nicht so schlecht aus. Die Scrollbalken stecken im tbody und verdrängen damit den Tabelleninhalt teilweise, aber daran müßte man auch noch drehen können.

Pass auf, dass du hier nicht selbst auf die Nase fällst.

Dass Firefox als einziger Browser das scrollen von Tabellengruppen (also tbody, thead und tfoot) erlaubt ist ein bekannter Verstoß gegen CSS 2.1;

Dieser Fehler wird ab Version 4 behoben sein, d.h. in Zukunft verhalten sich die Browser hier allesamt (soweitmöglich) standardkonform.

Gruß

[Gunnar Bittersmann]

@@Daniel unreg:

nuqneH

Dass Firefox als einziger Browser das scrollen von Tabellengruppen (also tbody, thead und tfoot) erlaubt ist ein bekannter Verstoß gegen CSS 2.1;

Dieser Fehler wird ab Version 4 behoben sein

Das wäre unsinnig, das Scrollen von Tabellenzeilengruppen aus dem Fuchs auszubauen. CSS 3 erlaubt es nämlich. [CSS3-BOX]

Qapla'

[Beat]

Dass Firefox als einziger Browser das scrollen von Tabellengruppen (also tbody, thead und tfoot) erlaubt ist ein bekannter Verstoß gegen CSS 2.1;
Dieser Fehler wird ab Version 4 behoben sein
Das wäre unsinnig, das Scrollen von Tabellenzeilengruppen aus dem Fuchs auszubauen. CSS 3 erlaubt es nämlich. [CSS3-BOX]

Habe ich mir vor deinem Post angeschaut, und bin zum Schluss gekommen, dass overflow nur auf block (non replaced) oder inline-block Elemente angewandt werden darf.

Aber ich meine auch, dass der Standard hier ausgebaut werden muss, denn offensichtlich muss das Tabellenhandling verbessert werden.

mfg Beat

[Gunnar Bittersmann]

@@Beat:

nuqneH

3 erlaubt es nämlich. [CSS3-BOX]

Habe ich mir vor deinem Post angeschaut, und bin zum Schluss gekommen, dass overflow nur auf block (non replaced) oder inline-block Elemente angewandt werden darf.

Click mal auf 'block'!

Qapla'

[Beat]

3 erlaubt es nämlich. [CSS3-BOX]

Habe ich mir vor deinem Post angeschaut, und bin zum Schluss gekommen, dass overflow nur auf block (non replaced) oder inline-block Elemente angewandt werden darf.

Click mal auf 'block'!

Zitat-Teil 1:
"A block-level box is a box that has a used value for ‘display’ of ‘block’, ‘list-item’, ‘table’, ‘table-*’ (i.e., all table boxes) or <template>."

OK, da gehören dann table-row-groups dazu.

Zitat-Teil 2:
" A block-level element is an element all of whose top-level non-anonymous boxes are block-level. "

WTF ist das???

Damit ein table-cell ein Blocklevel ist, muss es Blocklevel-Elemente enthalten. Erst dann ist auch das table-row ein block-level, erst dann das table-row-group ein block-level...

Wie auch immer...

Allerdings muss man beachten:
overflow und height treffen für table-row und table-row-group zu.
nicht aber min-height / max-height.

mfg Beat

[Der Martin]

Hallo,

Zitat-Teil 2:
" A block-level element is an element all of whose top-level non-anonymous boxes are block-level. "
WTF ist das???

"Ein Block-Level Element ist ein Element, dessen übergeordnete nicht-anonyme Boxen alle Block-Level sind."

Damit ein table-cell ein Blocklevel ist, muss es Blocklevel-Elemente enthalten.

Nein, *in* Block-Level-Elementen und *nur* Block-Level-Elementen enthalten sein.

Erst dann ist auch das table-row ein block-level, erst dann das table-row-group ein block-level...

Nein, andersrum. :-)

Allerdings muss man beachten:
overflow und height treffen für table-row und table-row-group zu.
nicht aber min-height / max-height.

Verstehen muss man das aber nicht.

So long,
 Martin

[Beat]

Nein, andersrum. :-)

Danke. Dann kann ich den Kopfstand ja jetzt abbrechen.

mfg Beat

[Gunnar Bittersmann]

@@Beat:

nuqneH

Nein, andersrum. :-)

Danke. Dann kann ich den Kopfstand ja jetzt abbrechen.

Sag das mal ʍopɐɥs! ;-)

Qapla'

[Daniel unreg]

@@Gunnar Bittersmann:

Hallo,

Das wäre unsinnig, das Scrollen von Tabellenzeilengruppen aus dem Fuchs auszubauen. CSS 3 erlaubt es nämlich. [CSS3-BOX]

Es ist bereits geschehen. Auf Basis von CSS 2.1, welches aktueller ist als der von dir genannte Working Draft.

Beachte allerdings, dass ich in diesem Fall (ausnahmsweise) kein Plädoyer gehalten habe.

Festzustellen ist jedoch, das Tabellen weder ausgereift spezifiziert noch implementiert sind.

Gruß, Daniel

[Beat]

ich soll den Inhalt einer Tabelle scrollbar machen, so dass man runter scrollen kann und oben der thead stehenbleibt. Leider hab ich überhaupt keine Idee wie man sowas vernünftig implementieren soll.

Bspw. soll die Tabelle mit 200 px Höhe angezeigt werden und 100 Zeilen haben. Ich scrolle nun innerhalb dieses 200px Bereichs und oben bleiben die Spaltenüberschriften stehen.

Folgender Test wird leider nicht an allen Browser umgesetzt, wäre aber der theoretische Weg:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Untitled</title>  
<style type="text/css">  
  table {margin:0; border:1px solid black; width:10em;}  
  tbody {height:4em; overflow:auto;}  
  td, th {border:1px solid red;}  
  thead th:last-child {visibility:hidden}  
</style>  
</head>  
<body>  
  
<table>  
<thead>  
  <tr><th>T</th><th>T</th><th></th></tr>  
</thead>  
<tbody>  
  <tr><td>X</td><td>X</td></tr>  
  ... (20x) ...  
</tbody>  
</table>  
  
</body>  
</html>  

Der Trick ist ein unsichtbares th mehr, dessen Breite genug Platz für den Scrollbar schafft.

:last-child lässt sich auch durch Klassen implementieren.

mfg Beat

[Gunnar Bittersmann]

@@Beat:

nuqneH

Der Trick ist ein unsichtbares th mehr

Fauler Trick.

Zusätzliche Elemente im Markup? Nein danke!

Wozu gibt’s denn Pseudoelemente? 'tr::after' does the trick.

Kleiner Schönheitsfehler: Angabe der Positionierung der Scrollbar neben Tabellenzellen in Pixeln abhängig von der Breite der Scrollbar, passt also nicht für alle Systeme. Beim Zoomen verändert sich die Größe dessen, was CSS für ein Pixel hält; die Breite der Scrollbar aber nicht.

Außerdem kann man tbody auch horizontal scrollen (per Touchpad beim MacBook), was dann merkwürdig aussieht:

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Groudon!

böse, weil semantisch inkorrekt, weil a) die Daten von den Spaltenüberschriften getrennt werden und b) ein zusätzliches Element verwendet wird.

• Packe die Überschriften in eine Tabelle.
• Packe den Rest der Tabelle in ein Div.
• gib diesem overflow: scroll;

Matthias