Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Linda Hamilton
Freigeben: 2024-10-29 22:49:02
Original
354 Leute haben es durchsucht

How to Rotate Text in HTML Tables Without Distorting Cell Size?

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;
}
Nach dem Login kopieren
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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!