Bootstrap 4 Modal mit Tabelle Smartphoneansicht sehr bescheiden

[Rolf B]

Hallo Emess,

Aber wenn du mir nicht verraten willst wo ich falsch verschachtelt habe, muss ich wohl auf weitere Hilfe warten. Dachte immer das wäre der Sinn eines Forums.

Der Sinn DIESES Forums ist Hilfe zur Selbsthilfe. Der Sinn einer Frage ist übrigens auch, das Problem klar zu beschreiben, das ist nicht ganz so einfach bei Dir. Das von Dir gepostete HTML ist im Bereich Profil, hinter dem Biografie-Button? Diese Suche hättest Du uns ersparen können.

Der von Tabellenkalk benannte Schachtelungsfehler existiert - du hast ein tr Element außerhalb einer Table (siehe "Seine Bilder sind in ..."). Der W3C Validator dürfte Dir das gnadenlos um die Ohren hauen - deine Schachtelung stimmt an einigen Stellen nicht.

Was ist Schachtelung? Guck mal hier, vielleicht wird es dann klarer. Stell Dir die HTML Elemente wie Schachteln (oder Kisten) vor. Eine große Schachtel enthält mehrere kleinere. Die kleinen Schachteln enthalten noch kleinere Schachteln. Alles steckt ineinander, es ist "verschachtelt". Aber eine kleine Schachtel hat nur zwei Möglichkeiten: Sie ist in einer großen Schachtel drin, oder nicht. Deswegen ist sowas falsch:

<table>
  <tr>
  </table>
</tr>

Die Verschachtelung passt nicht.

Und dann gibt es Schachteln, die dürfen nicht allein sein. Ein <tr> Element muss immer in einem <table> Element enthalten sein. Sonst stimmt die Schachtelung für das tr Element nicht. Das ist bei dem tr der Fall, von dem Tabellenkalk sprach.

Das ist aber alles - meine ich - kein Grund für dein Problem, weil der Browser das tr und td sieht, keine table dazu hat und sie achselzuckend wegwirft.

Das Problem ist aus meiner Sicht, dass die Links, die Du in der 2. Tabelle verwendest, die Tabellenzellen in die Breite ziehen. Der Linktext ist die URL, d.h. Text ohne Weißraum darin, darum macht der Browser von sich aus erst bei dem "-" einen Zeilenumbruch. Und weil es trotz aller Bootstrap-Tricks immer noch eine Table ist, wird die Tabellenzelle an den Inhalt angepasst. Auch ein overflow:hidden wird ignoriert - hast Du ja schon in Zeile 434 ausprobiert.

Du kannst aber in die URL an passenden Stellen auch eine "Sollbruchstelle" einfügen, mit dem <wbr> Element. Nicht im href-Attribut, aber im Linktext. Ich würde das hinter den / Zeichen tun:

https://www.meinkunstgarten.de/<wbr>ausstellungen/<wbr>tag-der-druckkunst-2022/

Eine andere Möglichkeit wäre, in dem max-width:45em @media-Block für a Elemente einen Zwangsumbruch festzulegen. Mit word-wrap:break-all bricht er gnadenlos um und die Tabelle geht nicht mehr in die Breite. Das sieht natürlich nicht so toll aus. <wbr> ist schicker, aber auch etwas mehr Arbeit.

Die beste Möglichkeit wäre, die Layout-Tabelle korrekt als Description List zu setzen (dl Element). Was Du da hast, sind nicht unbedingt tabellarische Daten. Aber das macht natürlich noch etwas mehr Arbeit.

Rolf