Zeilenhöhe bei Tabellen

[Auge]

Hallo

   table {
      table-layout: fixed;
      /*width: 40vw;*/
      /*height: 40vw;*/
      border-collapse: collapse;
      text-align: center;
   }
   td {
      max-width: 8vw;
      width: 8vw;
      max-height: 8vw;
      height: 8vw;
      background: #cecece;
      border: 1px solid white;
   }

ersetzt und die Schrift etwas verkleinert, um Zeilenumbrüche zu vermeiden. Für schmale Fenster muss die Schriftgröße eventuell noch weiter angepasst werden, zum Beispiel durch Media Queries.

Meine Kopie ^[1] des Quelltextes von @bleumi85 mit deinen Änderungen in der Größenfestlegung verhält sich wie gewollt. Nur bei sehr schmalen Viewports sprengt die Schriftgröße irgendwann das Layout. min-font-size als Ergänzung zu font-size wäre toll.

td {
  min-font-size: 0.85rem;
  font-size: 2em;
}

Warum hat das mit width: 20%; der Zellen von width: 60vw; der Tabelle nicht funktioniert? Indirekt gibt es doch eine berechenbare Größe für die Zellen und damit auch für die max-width: 80%; der Bilder ^[2].

Tschö, Auge

---

1. http://www.auge8472.de/daten/test.html (extra nicht verlinkt, da die Seite nicht dauerhauft verfügbar bleiben wird) ↩︎

2. Gleichartige Angaben für height und max-height darf sich der interessierte Leser hinzudenken. ↩︎