Wie drehe ich Text in einer Tabellenzelle um 90 Grad nach links und passe die Zellengröße basierend auf der Textlänge an?

So drehen Sie Text um 90 Grad nach links und passen die Zellengröße entsprechend dem Text in HTML an

Das Drehen von Textzellen um 90 Grad nach links mithilfe von CSS-Transformationen ist möglich aktuelle Herausforderungen wie Fehlausrichtung und fehlerhafte Formatierung. Um diese Probleme zu lösen, können wir eine strikte CSS- und HTML-Lösung implementieren, die die Zellengröße basierend auf der Textlänge dynamisch anpasst.

Im HTML-Code verwenden wir das Element, das den Text enthält, den wir drehen möchten:

<code class="html"><table cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td id="rotate"><span>10kg</span></td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td id="rotate"><span>20kg</span></td>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
    </tr>
    <tr>
        <td id="rotate"><span>30kg</span></td>
        <td>L</td>
        <td>M</td>
        <td>N</td>
        <td>O</td>
    </tr>
</table></code>

Als nächstes wenden wir CSS-Stile an, um den Text zu drehen und die Zellengröße entsprechend anzupassen:

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

So funktioniert es :

• Die te-Regel legt die vertikale Ausrichtung der Zellen nach unten und die Textausrichtung auf die Mitte fest.
• Die te-Span-Regel wendet den vertikalen Schreibmodus auf den Text an und dreht ihn um Es wird um 180 Grad gedreht und verhindert einen Umbruch.

Durch die Nutzung der Funktionen der CSS-Schreibmodi können wir die Zellengröße basierend auf der Länge des Textes dynamisch anpassen und so sicherstellen, dass der Text korrekt gedreht wird, ohne Kompromisse einzugehen das Layout der Tabelle. Diese Methode ist besonders nützlich für Szenarien, in denen die Textlängen innerhalb einer Spalte erheblich variieren.

Das obige ist der detaillierte Inhalt vonWie drehe ich Text in einer Tabellenzelle um 90 Grad nach links und passe die Zellengröße basierend auf der Textlänge an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!