span in td soll so hoch sein wie td

[MudGuard]

Hi,

ich hab ein vorgegebenes HTML, das ich nicht ändern kann - ich kann nur ein css dazu beisteuern.

In dem HTML ist eine Tabelle, darin (oh Wunder) eine Zelle, die Text direkt enthält, aber auch ein span mit Klasse ignored und Textinhalt. Der gesamte Text-Inhalt paßt in eine Zeile (forciert mit white-space: pre;)

Dem span hab ich eine Hintergrundfarbe gegeben. Leider deckt die Hintergrundfarbe nicht die gesamte Höhe der Zelle ab (in anderen Zellen ist Inhalt, der mehr Höhe hat als eine Textzeile (z.B. ein Bildchen).

Wie bekomme ich das span so hoch wie die Tabellenzeile?

im Codepen (siehe problematische Seite) hab ich's mit display: inline-block; height:100%; probiert, hatte aber leider keine Auswirkung.

Wie krieg ich das hin, daß das span so hoch wird wie die td?

Danke im Voraus!
cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

Wie krieg ich das hin, daß das span so hoch wird wie die td?

Ohne Markup-Änderung fällt mir dazu nichts ein. Wenn noch im td noch ein span um alles wäre, könnte man das auf display: flex setzen. Für td kann man das nicht, das muss wohl auf dem Defaultwert table-cell bleiben.

Den gewünschten Effekt erreichst du aber auch anders: mit box-shadow fürs .ignored-Element. (td kriegt dazu overflow: hidden verpasst.) Siehe Fork.

Der Schatten genügt, wenn die anderen Tabellenzellen in der Zeile wenig Inhalt haben. Wenn da something<br>very<br>much<br>higher steht, reicht er nicht. Aber du kannst ja weitere Schatten hinzufügen: 0 -2lh, 0 2lh, …

Kwakoni Yiquan

[MudGuard]

Hi,

Wie krieg ich das hin, daß das span so hoch wird wie die td?

Ohne Markup-Änderung fällt mir dazu nichts ein. Wenn noch im td noch ein span um alles wäre, könnte man das auf display: flex setzen. Für td kann man das nicht, das muss wohl auf dem Defaultwert table-cell bleiben.

leider nicht möglich - ich kann in dem Fall nur CSS reinwerfen, also weder das HTML anpassen noch ein Javascript injizieren (mit dem könnte ich ja dann das HTML bzw. genauer das DOM anpassen.

Den gewünschten Effekt erreichst du aber auch anders: mit box-shadow fürs .ignored-Element. (td kriegt dazu overflow: hidden verpasst.) Siehe Fork.

das sieht vielversprechend aus.

Der Schatten genügt, wenn die anderen Tabellenzellen in der Zeile wenig Inhalt haben. Wenn da something<br>very<br>much<br>higher steht, reicht er nicht. Aber du kannst ja weitere Schatten hinzufügen: 0 -2lh, 0 2lh, …

Die Höhe des Schattens kann man wohl nicht beeinflussen, soweit ich das jetzt kurz zu box-shadow gelesen hab.

lh ist line-height?

mit +/- 2 ist's dann im Normalfall ausreichend.

Ich hatte es - nach der Anregung mit dem overflow-hidden - auch noch mit border probiert - aber das verschiebt bei zu breiter border-top dann den Text nach unten.

Danke jedenfalls.

Woher wußte ich eigentlich vorher, daß die Lösung von Dir kommen wird? ;-)

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

Die Höhe des Schattens kann man wohl nicht beeinflussen, soweit ich das jetzt kurz zu box-shadow gelesen hab.

Die Höhe allein nicht. Mit <spread-radius> beeinflusst du Höhe und Breite.

lh ist line-height?

Yep. [MDN]

Ich hatte es - nach der Anregung mit dem overflow-hidden - auch noch mit border probiert - aber das verschiebt bei zu breiter border-top dann den Text nach unten.

Ja. outline tut das aber nicht. Was mich auf die vermutlich bessere Idee bringt:

Im Gegensatz zum Rahmen, wo man border-with für alle vier Richtungen getrennt angeben kann^[1], hat Outline in alle Richtungen dieselbe Dicke. Man kann das Element aber mit clip-path: polygon(…) zurechtschneiden: neuer Fork.

9in sollte groß genug sein.^[2] Wenn nicht, kannst du auch 666in angeben. Oder 1e9in. Bei großem Wert brauchst du auch nur 3 Eckpunkte, da die Seiten des Dreiecks dann quasi-parallel verlaufen.^[3]

Woher wußte ich eigentlich vorher, daß die Lösung von Dir kommen wird? ;-)

Hm, keine Ahnung.

Kwakoni Yiquan

---

1. Für oben und unten bietet sich border-block an, für links und rechts border-inline (bei horizontaler Schreibrichtung), s.a. TIL about -starting -blocks ↩︎

2. Den Wert 9in verwende ich in der CSS Battle häufig für etwas Großes, wenn es nicht darauf ankommt, wie groß genau. Bspw. border-radius:0 9in 9in 0 für einen Halbkreis. ↩︎

3. Auch davon wird in der CSS Battle rege Gebrauch gemacht. ↩︎

[MudGuard]

Hi,

Die Höhe des Schattens kann man wohl nicht beeinflussen, soweit ich das jetzt kurz zu box-shadow gelesen hab.

Die Höhe allein nicht. Mit <spread-radius> beeinflusst du Höhe und Breite.

das radius klingt so kreislich, ich will doch Ecken ;-)

Ich hatte es - nach der Anregung mit dem overflow-hidden - auch noch mit border probiert - aber das verschiebt bei zu breiter border-top dann den Text nach unten.

Ja. outline tut das aber nicht. Was mich auf die vermutlich bessere Idee bringt:

ich merke, daß ich nicht mehr allzu oft css "mache". Da ist einiges wieder in Vergessenheit geraten. Und vieles neues ist noch nicht bei mir angekommen - obwohl ich hier immer fleißig mitlese …

Im Gegensatz zum Rahmen, wo man border-with für alle vier Richtungen getrennt angeben kann[^border], hat Outline in alle Richtungen dieselbe Dicke. Man kann das Element aber mit clip-path: polygon(…) zurechtschneiden: neuer Fork.

Danke. Und das display: inline-block und das height:100% braucht's beides nicht. Dafür fehlte im pen das font-family: monospace …

Super, damit kann ich einige zig User glücklich machen - zu viele, um überall Tampermonkey zu installieren und ein script zu bauen, das das DOM manipuliert …

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

das radius klingt so kreislich, ich will doch Ecken ;-)

Klassiker: Like a rounded corner

Super, damit kann ich einige zig User glücklich machen

Super, dann war die ganze Zeit, die ich mit Battlen verbracht habe, ja nicht umsonst. Da kommt man öfter mal zu CSS-Eigenschaften, die man sonst kaum einsetzt, wie eben clip-path.

Kwakoni Yiquan

PS: Und auch zu HTML-Attributen, die man sonst kaum einsetzt. Ihr erinnert euch an
<body bgcolor=#FFFFFF text=#000000>?

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Man kann das Element aber mit clip-path: polygon(…) zurechtschneiden: neuer Fork.

🤦‍♂️ Kann man. Muss man aber nicht.

Geht einfacher: mit clip-path: inset(…)^[1], siehe weiteren Fork.

Kwakoni Yiquan

---

1. Verwende ich auch öfter in der CSS Battle. Manchmal auch mit clip-path: inset(… round …), das spart eine border-radius-Deklaration. Aber du willst ja Ecken. 😄 ↩︎