Comment faire pivoter le texte de 90 degrés vers la gauche dans une cellule de tableau et ajuster la taille des cellules en fonction de la longueur du texte ?

Comment faire pivoter le texte de 90 degrés vers la gauche et ajuster la taille des cellules en fonction du texte en HTML

La rotation des cellules de texte de 90 degrés vers la gauche à l'aide des transformations CSS peut présenter des défis, tels qu’un mauvais alignement et un formatage erroné. Pour résoudre ces problèmes, nous pouvons implémenter une solution CSS et HTML stricte qui ajuste dynamiquement la taille des cellules en fonction de la longueur du texte.

Dans le code HTML, nous utilisons l'attribut élément pour contenir le texte que nous voulons faire pivoter :

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

Ensuite, nous appliquons des styles CSS pour faire pivoter le texte et ajuster la taille de la cellule en conséquence :

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

Voici comment cela fonctionne :

• La ème règle définit l'alignement vertical des cellules vers le bas et l'alignement du texte au centre.
• La ème règle span applique le mode d'écriture vertical au texte, retourne il 180 degrés et empêche le retour à la ligne.

En utilisant les capacités des modes d'écriture CSS, nous pouvons ajuster dynamiquement la taille de la cellule en fonction de la longueur du texte, garantissant que le texte pivote correctement sans compromettre la disposition de la table. Cette méthode est particulièrement utile pour les scénarios dans lesquels la longueur du texte varie considérablement au sein d'une colonne.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!