Comment faire pivoter le texte dans les tableaux HTML sans déformer la taille des cellules ?

Utiliser CSS pour faire pivoter le texte et ajuster la taille des cellules dans les tableaux HTML

Lorsque vous essayez de faire pivoter le texte dans les cellules d'un tableau, il est important de prendre également en compte l'impact sur la taille des cellules. Comme illustré dans l'exemple fourni, lors de l'utilisation de transformations CSS pour faire pivoter du texte sans ajuster la taille des cellules, le résultat peut être déformé.

Pour résoudre ce problème, des ajustements des styles de tableau et de cellule sont nécessaires. En définissant vertical-align: bottom et text-align: center pour les en-têtes de tableau (th), le texte est positionné correctement après la rotation.

Pour Chrome spécifiquement, il est nécessaire d'envelopper le texte pivoté dans un

Exemple de code

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

  

    
Rotated text by 90 deg.
  

En mettant en œuvre ces ajustements de style, il devient possible de faire pivoter le texte de 90 degrés tout en conservant la taille et le formatage des cellules. 
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!