max-height und tbody ...

[Ferdinand]

Hallo,

Okay, anscheinend gibt es gewisse Diskrepanzen zwischen max-height und tbody...

...und zwar verstehe ich nicht wirklich, wie die beiden interagieren.

Beispiel:

	table {
		overflow: hidden;
	}
	tbody {
		max-height: 0px;
		display: block;
	}

...Die erste Zeile der Tabelle wird trotzdem angezeigt (tbody ist direktes und EINZIGES Child von table). Überhaupt scheint die erste Zeile der Tabelle in meinem Fall von 0 bis genau 22 Pixel sozusagen "festzustecken", ehe von der ersten Zeile ab max-height: 23px; sukzessive erwartungsgemäß vertikal vergrößert wird.

Wie überrede ich meine Tabelle dazu, via max-height: 0px; optisch zu verschwinden, bzw. tatsächlich die Höhe einzunehmen, die mit max-height vorgegeben wird?

Vielen Dank für ein wenig Licht im Dunkeln. Grüße aus dem Grünen, Ferdinand.

[Rolf B]

Hallo Ferdinand,

...und zwar verstehe ich nicht wirklich, wie die beiden interagieren.

Ganz einfach: sie interagieren gar nicht.

Höhenangaben in Tables sind immer eine Mindest-Angabe.

→ https://www.w3.org/TR/CSS22/tables.html#height-layout

max-height im Kontext von Tabellen ist undefiniert

→ https://www.w3.org/TR/CSS22/visudet.html#min-max-heights

Da steht:

In CSS 2.2, the effect of 'min-height' and 'max-height' on tables, inline tables, table cells, table rows, and row groups is undefined.

tbody ist eine row group.

Ich habe die Selfwiki-Artikel zu height, min-height und max-height entsprechend ergänzt.

Rolf
der jetzt hofft, nicht irgendeine Spec übersehen zu haben, die etwas anderes behauptet…

[Gunnar Bittersmann]

@@Rolf B

tbody ist eine row group.

Welche man – ebenso wie rows, columns und column groups – mit visibility: collapse ausblenden kann. [MDN]

😷 LLAP

[Rolf B]

Hallo Gunnar,

ah ja, danke. Die Frage nach dem optischen (a.k.a. visuellen) Verschwinden hatte ich übersehen.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Hallo Gunnar,

ah ja, danke. Die Frage nach dem optischen (a.k.a. visuellen) Verschwinden hatte ich übersehen.

Ich würde doch denken, visibility: collapse lässt Zeilen und Spalten nicht nur visuell verschwinden, sondern nimmt die Elemente – ebenso wie visibility: hidden – auch aus dem accessibility tree.

😷 LLAP

[Ferdinand]

Nicht schlecht

Herr Specht

dank euch recht

[MudGuard]

Hi,

tbody ist eine row group.

aber nicht bei Ferdinand, er macht ja per display:block einen gewöhnlichen Block aus der table-row-group.

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo MudGuard,

gut gesehen. Dann müsste er auch noch

• display: inline-block ö.Ä. auf die td Elemente anwenden

Dann ist das Table-Layout hinreichend zerbröselt und max-height greift. Aber dann braucht's auch noch ein

• overflow: hidden auf das tbody-Element

damit die tds nicht unten aus dem tbody hinausgucken.

Der Visibilität einen Kollaps zu verpassen scheint mir zweckmäßiger 😉

Rolf