Wie drehe ich Text in HTML-Tabellen mit einstellbarer Zellengröße um 90 Grad?

So drehen Sie Text um 90 Grad mit anpassbarer Zellengröße in HTML

Beim Drehen von Text in HTML-Tabellen treten häufig Probleme bei der Aufrechterhaltung der Konsistenz der Zellengröße auf. Um dieses Problem anzugehen, untersuchen wir eine Lösung, die CSS und HTML verwendet, ohne dass komplexe Höhenberechnungen erforderlich sind.

Der Trick besteht darin, die CSS-Eigenschaften „vertikal-align“ und „text-align“ zu verwenden, um die Textausrichtung in Tabellenzellen anzupassen . Darüber hinaus nutzen wir die Eigenschaften -ms-writing-mode, -webkit-writing-mode und writing-mode, um das vertikale Schreiben von Text zu ermöglichen.

Um eine 90-Grad-Drehung zu erreichen, wenden wir eine Transformation an : drehen (180 Grad); um sicherzustellen, dass der Text vertikal angezeigt wird. Beachten Sie, dass diese Technik möglicherweise nicht in allen Browsern perfekt funktioniert, insbesondere in Chrome, das die Verwendung von erfordert. Elemente, um die Textrichtung für Tabellenüberschriften () zu korrigieren.

Hier ist ein praktisches Beispiel zur Demonstration:

<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>

Dieser Ansatz ermöglicht die Drehung von Text in Tabellenzellen unter Beibehaltung der gewünschten Zellengröße. Nutzen Sie diese Technik für eine problemlose vertikale Textanzeige in Ihren HTML-Tabellen und stellen Sie sicher, dass Ihre Daten klar und elegant dargestellt werden.

Das obige ist der detaillierte Inhalt vonWie drehe ich Text in HTML-Tabellen mit einstellbarer Zellengröße um 90 Grad?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!