Bootstrap 4 Modal mit Tabelle Smartphoneansicht sehr bescheiden

[Gunnar Bittersmann]

@@Rolf B

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.

Du hast das Problem wohl richtig erkannt …

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.

… aber nicht die Lösung. URLs als Linktext braucht kein Mensch.

URLs sind für Maschinen. Für Menschen sollten es aussagekräftige Linktexte sein.

Und die Texte sind ja schon da. Sie wollen nur genutzt werden. Nicht

<td>
  März: Online-Kollektiv-Ausstellung zum Tag der Druckkunst. <br> 
  <a href=" https://www.meinkunstgarten.de/ausstellungen/tag-der-druckkunst-2022/" target="_blank" title="">
    https://www.meinkunstgarten.de/ausstellungen/tag-der-druckkunst-2022/
  </a>
</td>

und auch nicht

  <a href=" https://www.meinkunstgarten.de/ausstellungen/tag-der-druckkunst-2022/" target="_blank" title="">
    https://www.meinkunstgarten.de/<wbr>ausstellungen/<wbr>tag-der-druckkunst-2022/
  </a>

sondern

<td>
  <a href=" https://www.meinkunstgarten.de/ausstellungen/tag-der-druckkunst-2022/" target="_blank">
    März: Online-Kollektiv-Ausstellung zum Tag der Druckkunst.
  </a>
</td>

Und schon hat sich das Layout-Problem erledigt, da in Texten kaum elendig lange Wörter vorkommen. (Es sei denn, man legt’s drauf an: Teil 1, Teil 2.) Und dann gibt’s ja automatische Silbentrennung.

Das überflüssige title-Attribut hab ich gleich mal entsorgt. Das target="_blank"-Attribut sollte auch noch entsorgt werden. Links sollten nicht im neuen Tab/Fenster geöffnet werden. Ob ein Nutzer einen Link im neuen Tabs öffnen möchte, kann sie selbst entscheiden und das ggfs. tun. Wie Jakob Nielsen sagt: “Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer's carpet. Don't pollute my screen with any more windows, thanks.”

---

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.

Key-Value-Paare kann man schon als tabellarische Daten ansehen. Wobei die Kopfzellen (die Jahreszahlen) dann als <th> ausgezeichnet werden sollten, nicht als <td>.

<dl> passt natürlich auch, vielleicht sogar besser. Aber <table> ist nicht gänzlich falsch. Es ist keine Layout-Tabelle.

🖖 Живіть довго і процвітайте