Eigenschaften von Tabellen

[Efchen]

Moin,

jetzt stell ich auch mal wieder was ein. Es geht sicher auch ein wenig in Richtung HTML, aber ich denke, der Kern meines Threads wird CSS sein.

Mir ist aufgefallen, dass sich Tabellen nicht (mehr) so leicht formatieren lassen, wie ich das in Erinnerung habe.

Und zwar war ich bisher immer davon ausgegangen, dass man einer Tabelle problemlos eine feste Breite zuweisen kann, dazu overflow:auto und dann bekommt man Scrollbalken an der Tabelle - aber dem ist nicht so!

Beispiel gefällig? Tabellen-Scroll-Test

Hier musste ich doch tatsächlich ein Element um die Tabelle legen. Diesem konnte ich eine fixe Größe und overflow geben, so dass ich Scrollbalken erhalte.

Hat sich da irgendwas am Verhalten von Tabellen verändert? Gibts ne andere Lösung, außer mit einem Element außen rum? Meine Wünsche gehen noch weiter, es soll dann schließlich die Kopfzeile stehen bleiben. Das habe ich früher schonmal erfolgreich gelöst, indem ich dem tbody eine feste Größe gebe und den dann scrollen lasse. Das dürfte aber schwierig werden auf die Weise, wenn das Element darüber die Größe vorgibt...

 

[prm]

Ich vermute (weiß es also nicht), dass die Ursache für dieses Problem woanders liegt:
Wenn die Tabelle insgesamt 300px breit ist, dann dürfen die Zellen insgesamt auch nicht breiter sein, damit sie hineinpassen.
Wenn du also 6 Spalten hast, dann darf jede Spalte (und damit th/td) - lässt man padding und border einmal weg - nur 50px breit sein.

Nun ist der Inhalt mancher deiner Zellen eben mehr als 50px breit bzw. hat mangels Leerzeichen an geeigneter Stelle keine Möglichkeit umzubrechen.
Damit werden m.E. die Zellen/Spalten und somit auch die Gesamttabelle verbreitert.

Wie gesagt ist das nur meine laienhafte Auffassung.

 

[Efchen]

Damit werden m.E. die Zellen/Spalten und somit auch die Gesamttabelle verbreitert.

Genau, aber sollte das nicht durch "overflow:auto" verhindert werden?

Wie gesagt ist das nur meine laienhafte Auffassung.

Ach komm, Du und Laie, dass ich nicht lache ;-)

 

[prm]

Die Verbreiterung sollte doch eher durch "overflow: hidden" verhindert werden.
Denn mit auto entscheidet ja der Browser, ob / dass er vergrößert.

Hidden macht jedoch insofern keinen Sinn, als dann der zu lange Inhalt für den Betrachter unsichtbar bleibt.

 

[Efchen]

Die Verbreiterung sollte doch eher durch "overflow: hidden" verhindert werden.
Denn mit auto entscheidet ja der Browser, ob / dass er vergrößert.

overflow:auto sollte, wenn der Platz für den Inhalt nicht ausreicht, Scrollbalken anzeigen. Und wenn der Platz noch reicht, keine Scrollbalken (so der Unterschied zu overflow:scroll).

Und genau das versuche ich ja. Ich habe eine sehr breite Tabelle, die nicht in den Viewport passt, ich möchte aber, dass man nur die Tabelle scrollen kann (dafür sind auch die Platzverschwender auf der Testseite).

 

[prm]

Das hilft dir jetzt vermutlich nicht weiter. Aber sieh mal diese Aussage von hier:
overflow:

Anmerkung: Die Anwendbarkeit von overflow wurde im Entwurf zu CSS 2.1 auf Tabellenzellen (unterstützt momentan keiner der Browser) und inline-block erweitert.

Ich weiß nicht, wie alt diese Aussage ist. Aber möglicherweise ist danach overflow bei Tabellen noch kein Standard. Geh' also mal dieser Spur nach, hab jetzt leider keine Zeit dafür.

 

[neuroleptika]

...(unterstützt momentan keiner der Browser)

Der aktuelle Safari schon, wenn table-layout auf fixed steht.

Für table ist overflow nicht gültig:
http://www.w3.org/TR/CSS2/visufx.html#overflow

Edit:

... Hat sich da irgendwas am Verhalten von Tabellen verändert?

Ob es einen älteren Browser gibt der overflow auch auf table anwendet weiß ich nicht. Laut Spezifikation war das auch in css 2 nicht möglich:
http://www.edition-w3.de/TR/1998/REC-CSS2-19980512/kap11.html#heading-11.1.1

 

[Efchen]

Danke erstmal, da werd ich mich mal reinlesen. Ich krieg meine Lösung schon noch :-)

 

[neuroleptika]

... Ich krieg meine Lösung schon noch :-)

Aber bestimmt nicht mit overflow: auto; für table. Deine <div>Lösung ist doch ok.

Mit table-layout: auto; ist width immer nur eine Mindestbreite.
table-layout: fixed; braucht in der Praxis auch passende Breiten von td

 

[Efchen]

Die div-Lösung hat nur einen Haken: Beim vertikalen Scrollen bleibt die Kopfzeile nicht stehen.

Ich denk mal laut...div ohne feste Höhe, tbody mit fixer Höhe und overflow:auto?

 

[neuroleptika]

Das habe ich dazu gefunden:
HTML tbody
Firefox reagiert tatsächlich auf overflow für tbody. Andere Browser ignorieren es.

Du könntest thaed position: fixed; geben und dem div height + overflow: auto;
Dafür mußt du aber td und th jeweils passende Breiten geben. Außerdem klappt das im IE<8 nicht.

Edit:
Ich habe mich an einem Fix für IE<8 versucht:
http://testseiten.red-rod.net/table-test-2.html
Das Beispiel funktioniert ab IE5.5 Win. , FF2.0 , Opera 9.63 und Safari4. Ältere Browser habe ich zur Zeit nicht.

Für IE<8 habe ich ein weiteres Element in th geschrieben und mit position: absolute; aus dem Textfluss genommen.

Eine andere Variante wäre eine Übersichtsliste (ul) über die Tabelle zu schreiben. Die echten th-Einträge könntest du für sehende Benutzer ausblenden.
Aber auch diese Methode braucht feste Breiten (für li, th bzw. td und für table).