Zeilenhöhe bei Tabellen

[bleumi85]

Hallo mal wieder an alle,

ich habe mir eine absolut simple Tabelle nach folgendem Muster erstellt:

<table>
   <tr>
      <td>AND</td><td>1</td><td>0</td>
   </tr>
   <tr>
      <td>1</td><td>1</td><td>0</td>
   </tr>
   <tr>
      <td>0</td><td>0</td><td>0</td>
   </tr>
</table>

dazu habe ich zunächst einmal folgende CSS:

table{
   table-layout:fixed;
   width:60%;
   border-collapse:collapse;
   text-align:center;
}

So weit so gut. Wenn ich jetzt meinen Browserfenster verkleinere, werden auch die Spalten "schmaler". Was ich jetzt gerne hätte ist eine quadratische Tabelle, sprich alle Zellen haben die selbe Höhe und Breite und das auch beim verkleinern des Browserfensters.

Meine Frage wäre also. Gibt es in CSS sowas wie

td{
   height:width;
}

oder was vergleichbares, was die Zellengröße dynamisch anpasst? Ich bin für jeden Hinweis dankbar.

[MrMurphy1]

Hallo

Du brauchst den Zellenhöhen und Zellenbreiten doch nur die gleiche Größe zu geben. Also zum Beispiel 33.33%

Gruss

MrMurphy

[bleumi85]

Hi,

du meinst:

td{
   width:33%;
   height:33%;
}

Hab ich schon versucht. Bringt nichts. Mein eigentlicher Plan ist folgender. Ich möchte eine Tabelle erstellen bei der in die erste Spalte und in die erste Zeile Bilder kommen. Nun soll die Tabelle quadratisch sein und die Bilder sollen je nach Format (hoch oder quer) einen prozentuellen Anteil der Zellenhöhe bzw. breite bekommen. Bei Bilder im Querformat funktioniert das Prima. Nur bei Bildern im Hochformat ist es, dass diese die Höhe der Zeile bestimmen. Ich hoffe das war soweit verständlich.

Hallo

Du brauchst den Zellenhöhen und Zellenbreiten doch nur die gleiche Größe zu geben. Also zum Beispiel 33.33%

Gruss

MrMurphy

[MrMurphy1]

Hallo

Dann gib dem table-Element mal eine Breite (width) und eine Höhe (height) von jeweils 60vw.

Gruss

MrMurphy

[bleumi85]

Hi,

du meinst:

table{
   table-layout:fixed;
   width:60vw;
   height:60vw;
}

Falls ja, führt es leider auch zu keiner Veränderung.

Hallo

Dann gib dem table-Element mal eine Breite (width) und eine Höhe (height) von jeweils 60vw.

Gruss

MrMurphy

[MrMurphy1]

Hallo

Ich erhalte dann mit deinen Vorgaben quadratische Zellen:

Quadratische Zellen

Gruss

MrMurphy

[bleumi85]

Ja, ich auch, wenn ich Text in die Zellen packe. Aber ich hab nunmal in der ersten Zeile und in der ersten Spalte Bilder. Diese Bilder sind größer als die Zellen. Ich will nun also zunächst einmal erreichen, dass ich eine responsive quadratische Tabelle habe und den Bildern dann 80% der Breite bzw. der Höhe der jeweiligen Zelle einräumen, so dass auch diese responsiv verkleinert bzw. vergrößert werden.

Hallo

Ich erhalte dann mit deinen Vorgaben quadratische Zellen:

Quadratische Zellen

Gruss

MrMurphy

[Auge]

Hallo

Ja, ich auch, wenn ich Text in die Zellen packe. Aber ich hab nunmal in der ersten Zeile und in der ersten Spalte Bilder. Diese Bilder sind größer als die Zellen. Ich will nun also zunächst einmal erreichen, dass ich eine responsive quadratische Tabelle habe und den Bildern dann 80% der Breite bzw. der Höhe der jeweiligen Zelle einräumen, so dass auch diese responsiv verkleinert bzw. vergrößert werden.

Was hindert dich daran, den Bildern, die in Tabellenzellen liegen, die gewünschte (maximale?) Breite zuzuweisen?

td img { width: 80%; }
/* bzw. meistens besser */
td img { max-width: 80%; }

Tschö, Auge

[bleumi85]

Hi,

eigentlich hindert mich daran gar nichts. Das Problem beginnt allerdings schon damit, dass ich bspw. Bilder habe mit einer Abmessung von 100x100. Mal angenommen meine Spalten sind alle zufällig 100px breit und ich setze die Breite der Bilder auf 80%, dann wären das 80px. Dadurch habe ich aber nur noch eine Zeilenhöhe von 80px was dann schon wieder nicht mehr quadratisch ist. Das könnte ich noch mit einem entsprechenden Padding beheben, aber was mache ich dann mit Bildern im Hoch- oder Querformat?

Hallo

Ja, ich auch, wenn ich Text in die Zellen packe. Aber ich hab nunmal in der ersten Zeile und in der ersten Spalte Bilder. Diese Bilder sind größer als die Zellen. Ich will nun also zunächst einmal erreichen, dass ich eine responsive quadratische Tabelle habe und den Bildern dann 80% der Breite bzw. der Höhe der jeweiligen Zelle einräumen, so dass auch diese responsiv verkleinert bzw. vergrößert werden.

Was hindert dich daran, den Bildern, die in Tabellenzellen liegen, die gewünschte (maximale?) Breite zuzuweisen?

td img { width: 80%; }
/* bzw. meistens besser */
td img { max-width: 80%; }

Tschö, Auge

[Auge]

Hallo

Vorweg: Bitte zitiere nur die Teile des Textes der Vorpostings, auf die du dich zu beziehen gedenkst. Löschst du die irrelevanten Teile der Vorpostings aus deinem Eingabefeld, ergibt sich ein besser lesbarer Text, als wenn da alles, auch Unnötiges, drin stehen bleibt.

Was hindert dich daran, den Bildern, die in Tabellenzellen liegen, die gewünschte (maximale?) Breite zuzuweisen?

eigentlich hindert mich daran gar nichts. Das Problem beginnt allerdings schon damit, dass ich bspw. Bilder habe mit einer Abmessung von 100x100. Mal angenommen meine Spalten sind alle zufällig 100px breit und ich setze die Breite der Bilder auf 80%, dann wären das 80px.

Ja.

Dadurch habe ich aber nur noch eine Zeilenhöhe von 80px was dann schon wieder nicht mehr quadratisch ist.

Nein. Die Höhe des Bildes passt sich der vorgegebenen Maximalbreite an. Bei deinem Beispiel beträgt die Höhe 80px. Bei einem Bild, das nativ eine Größe von 100x80px hat, ergibt sich hingegen eine Höhe von 64px (80*0.8). Bei einer Festlegung der Größe der Tabellenzellen von 33.3% von 60vw, einer Größe, die absolut zur Viewportbreite festgelegt ist, verändert das aber nichts an der Größe der Tabellenzellen.

Das könnte ich noch mit einem entsprechenden Padding beheben, aber was mache ich dann mit Bildern im Hoch- oder Querformat?

Mit Angaben zur Maximalbreite und -höhe bist du das Problem mit dem Hoch- und Querformat los. Die Dimension mit dem größeren Wert schlägt logischerweise zuerst an und die jeweils andere Dimension passt sich einfach an.

td img { max-width: 80%; max-height: 80%; }

Tschö, Auge

[bleumi85]

Ich versuche nochmal mein Problem so genau wie möglich zu schildern, da auch die letzte Idee bisher keine Abhilfe geschafft hat. Mein Konstrukt ist derzeit folgendes:

table{
   table-layout:fixed;
   border-collapse:collapse;
   width:60vw;
   height:60vw;
}

img{
   max-width:80%;
   max-height:80%;
}

Die Idee, die ich versuche umzusetzen ist folgende: Wir betreiben mit ein paar Freunden ein Bundesliga-Tippspiel und ich möchte jetzt visuell für jeden einzelnen Tipper darstellen, wie er welches Spiel getippt hat. Daher habe ich mir eine Tabelle gebaut die in der ersten Zeile und in der ersten Spalte die Vereinswappen beinhaltet. In die Tabellenzellen kommen die Ergebnisse. Wenn ich nur mal angenommen von einer Spaltenbreite von exakt 100px ausgehe ergeben sich die folgenden 3 Resultate wenn ich die Angaben so wähle wie oben:

• Quadratisches Bild (400 x 400): Breite: 80px, Höhe 80px, Zelle: 100x80
• Hochformatiges Bild (400 x 200): Breite: 80px, Höhe 160px, Zelle: 100x160
• Querformatiges Bild (200 x 400): Breite: 80px, Höhe 40px, Zelle: 100x40

Da die Zelle nun die Größe, des größten Elements annimmt, habe ich eine Zellenhöhe von 160px und eine Breite von 100px was nunmal definitiv nicht quadratisch ist.

Was ich gerne hätte ist eine Tabelle der ich bspw. die Breite 50% mitgebe. Daraus ergibt sich eine Zellenbreite, je nach Anzahl der Spalten und diese Zellenbreite hätte ich dann auch gerne als fixe Zellenhöeh, damit es eben quadratisch ist. Das scheint aber irgendwie nicht möglich.

[Auge]

Hallo

Ich versuche nochmal mein Problem so genau wie möglich zu schildern, da auch die letzte Idee bisher keine Abhilfe geschafft hat. Mein Konstrukt ist derzeit folgendes:

table{
   table-layout:fixed;
   border-collapse:collapse;
   width:60vw;
   height:60vw;
}

img{
   max-width:80%;
   max-height:80%;
}

Wo hast du die vorgeschlagenen Angaben zu Breite und Höhe der Tabellenzellen gelassen? Mit deinem Code verteilen sich die Größen der Zellen nach ihrem Inhalt. Mit der Vorgabe, die als erster Vorschlag kam, verteilen sich die Zellen gleichmäßig, wenn es denn bei drei Zellen pro Zeile und Spalte bleibt.

Tschö, Auge

[MrMurphy1]

Hallo

Das scheint aber irgendwie nicht möglich.

Doch. Aber du zeigst uns leider nicht den konkreten Quelltext mitsamt der Bilder und bist andererseits nicht in der Lage unsere Lösungen für deinen Quelltext anzuwenden.

Gruss

MrMurphy

[bleumi85]

Hallo

Das scheint aber irgendwie nicht möglich.

Doch. Aber du zeigst uns leider nicht den konkreten Quelltext mitsamt der Bilder und bist andererseits nicht in der Lage unsere Lösungen für deinen Quelltext anzuwenden.

Den zeige ich euch sogar Minimalbeispiel gerne und in meinen Augen sind die Zellen in keiner Weise quadratisch. Und ich vermute mal es liegt nicht daran, dass ich jetzt auf die Schnelle nur 4 statt 18 Vereine genommen habe.

Gruss

MrMurphy

[MrMurphy1]

Hallo

Andere Ausgangslage, andere Lösung.

Ich habe mal mein Beispiel aktualisiert. Dabei habe ich

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

durch

   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.

Gruss

MrMurphy

[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. ↩︎

[Matthias Apsel]

Hallo Auge,

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 [Gleichartige Angaben für height und max-height darf sich der interessierte Leser hinzudenken.]

Weil zwischen table und td noch andere Elemente sind. Und vor allem tr breiter als hoch ist.

Bis demnächst
Matthias

[bleumi85]

Hi und Danke für die vielen nützlichen Tipps.

Zu guter letzt bin von meiner Tabelle weggegangen und habe das ganze mit ineinader verschachtelten <divs> gelöst, was letztendlich zu der Lösung geführt hat die ich haben wollte.

[marctrix]

Hej bleumi85,

Hi und Danke für die vielen nützlichen Tipps.

Zu guter letzt bin von meiner Tabelle weggegangen

Autsch - das ist aber nicht gut, es sind doch schließlich tabellarische Daten.

Und Auge hat es doch vorgemacht!

Hier noch mal die Adresse: http://www.auge8472.de/daten/test.html (extra nicht verlinkt, weil nicht dauerhaft verfügbar).

Marc

[Gunnar Bittersmann]

@@bleumi85

Zu guter letzt bin von meiner Tabelle weggegangen und habe das ganze mit ineinader verschachtelten <divs> gelöst,

Das ist falsch.

was letztendlich zu der Lösung geführt hat die ich haben wollte.

Falsches Markup ist keine Lösung.

Bei divs ist keinerlei Information vorhanden, in welcher Beziehung (Zeilen, Spalten) die Zellen stehen. (Es sei denn, da wird mit ARIA nachgerüstet – das wäre aber grober Unfug.)

LLAP 🖖

[marctrix]

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.

Oder durch ´font-size: calc (1rem + 1vw);ˋ

Allerdings hat man auf kleinen Bildschirmen oft lieber ein größere Schrift, weil das sonst für viele auf dem Smartphone schlecht lesbar wird.

Das wäre dann so was wie ´font-size: calc (5rem - 1vw);ˋ

Mit den Größen musst du spielen, bis es für dich passt...

Gruß,

Marc

[Gunnar Bittersmann]

@@bleumi85

… aber was mache ich dann mit Bildern im Hoch- oder Querformat?

Gehe zurück zu den Wurzeln.

LLAP 🖖

[Gunnar Bittersmann]

@@bleumi85

Was ich jetzt gerne hätte ist eine quadratische Tabelle, sprich alle Zellen haben die selbe Höhe und Breite und das auch beim verkleinern des Browserfensters.

Wie ein Sudoku.

LLAP 🖖