HTML HTML/CSS - Spalten-Breite minimieren/verkleinern?

[Dsimon24]

Hallo zusammen,

ich habe heute mal eine Frage zu etwas eigentlich ganz einfachem - komme aber nicht zum Ergebnis.

Also, ich habe eine Liste und möchte gerne die einzelnen Spalten verkleinern. In der zweiten Zeile be-
finden sich die Werte (xxxx) in vertikaler Anordnung. Umso größer der Wert (je mehr xxx), desto grö-
ßer die Spalten-Weite. Kann man diese in der Tabelle dennoch minimieren?

https://jsfiddle.net/jsegkLbf/

LG.

 

[Amaoto]

Beispielsweise, indem du den Inhalt von <th> in einen <span> steckst und den dann mit writing-mode: sideways-rl ausrichtest.

https://jsfiddle.net/6sdqb32o/

 

[SomeDifferent]

Anstatt den Text zu rotieren nutze doch die built-in fetaures für einen vertikalen Text :

.header-label {
  /*writing-mode: vertical-rl;*/
writing-mode: vertical-rl;
text-orientation: mixed;
  /*vertical-align: middle;*/
  /*text-align: left;*/
  font-weight: bold;
  /*word-break: break-word;*/
  /*height: 20px;*/
  table-layout: fixed;
  overflow: hidden;
  height: 80px;
}

 

[Dsimon24]

Ich versende die Tabelle anschließend mittels des PhpMailers via eMail.
Problem dabei ist es dann, dass es in der eMail nicht mehr vertikal
dargestellt wird. Gibt es einen anderen Weg zur Umsetzung?

 

[spcqike]

so?
https://jsfiddle.net/pu7b12zs/

mit nem zusätzlichen

table {
table-layout: auto;
};

sagt zumindest ChatGPT läuft auch, denke ich. (wir sind ja hier nicht auf Stackoverflow, oder?)

 

[Flommey]

Ich glaube, mit einer Kombination aus table/td bzw. th und rotiertem Text wirst du insbesondere in E-Mails immer irgendwelche Probleme haben. Oder geht es nur um einen einzigen Mail-Client?

Eine Möglichkeit sehe ich hier:
https://stackoverflow.com/questions...ss-that-affect-their-parents-height-correctly
Da werden allerdings keine Tabellen benutzt. Also keine Ahnung, ob's klappt.

Eine andere Möglichkeit könnte https://www.php.net/manual/de/function.imagecreatetruecolor.php sein. Also mit PHP ein Bild generieren, es rotieren und dann ins HTML einbauen. Dann hättest du natürlich Bilder in der E-Mail.
Wäre das was?