Wie kann man Text in einer HTML-Tabelle um 90 Grad drehen, ohne die Ausrichtung zu verfälschen?

Text um 90 Grad nach links drehen mit angepasster Zellengröße unter Verwendung von HTML und CSS

Um das Problem zu beheben, dass gedrehter Text die Zellenausrichtung in HTML durcheinander bringt Tabellen ist eine genauere Vorgehensweise erforderlich. Anstatt CSS-Transformationen zu verwenden, können wir die Textrichtungs- und Ausrichtungseigenschaften von HTML und CSS nutzen.

Der folgende Codeausschnitt verwendet diese Technik:

<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;
}</code>

<code class="html"><table>
  <tr>
    <th><span>Rotated text by 90 deg.</span></th>
  </tr>
</table></code>

Durch Anwenden des Schreibmodus Wenn wir die Eigenschaft auf die gedrehten Textelemente anwenden, erzwingen wir, dass der Text senkrecht zur Achse des gedrehten Elements fließt. Dadurch wird die richtige Ausrichtung gewährleistet und verhindert, dass Text in benachbarte Zellen überläuft.

Bemerkenswert ist, dass Chrome die Eigenschaft „writing-mode“ für die Elemente nicht unterstützt. Um dies zu beheben, packen wir den Text in ein span-Element und wenden die Eigenschaft -webkit-writing-mode an, um die browserübergreifende Kompatibilität sicherzustellen.

Das obige ist der detaillierte Inhalt vonWie kann man Text in einer HTML-Tabelle um 90 Grad drehen, ohne die Ausrichtung zu verfälschen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!