Wie kann man Text in HTML-Tabellen drehen, ohne die Zellengröße zu verzerren?

Mit CSS Text drehen und Zellengröße in HTML-Tabellen anpassen

Beim Versuch, Text in Tabellenzellen zu drehen, ist es wichtig, dies ebenfalls zu berücksichtigen die Auswirkung auf die Zellgröße. Wie im bereitgestellten Beispiel dargestellt, kann das Ergebnis verzerrt sein, wenn CSS-Transformationen zum Drehen von Text verwendet werden, ohne die Zellengröße anzupassen.

Um dieses Problem zu beheben, sind Anpassungen an den Tabellen- und Zellenstilen erforderlich. Durch die Einstellung „vertikal-align: unten“ und „text-align: center“ für Tabellenüberschriften (th) wird der Text nach der Drehung korrekt positioniert.

Speziell für Chrome ist es notwendig, den gedrehten Text innerhalb eines

Beispielcode

<code class="css">th {
  vertical-align: bottom;
  text-align: center;
}

th span {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

  

    
Rotated text by 90 deg.
  

Durch die Implementierung dieser Stilanpassungen wird es möglich, Text um 90 Grad zu drehen und dabei die richtige Zellengröße und Formatierung beizubehalten. 
Das obige ist der detaillierte Inhalt vonWie kann man Text in HTML-Tabellen drehen, ohne die Zellengröße zu verzerren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!