Comment faire pivoter le texte de 90 degrés dans un tableau HTML sans gâcher l'alignement ?

Rotation du texte à gauche de 90 degrés avec une taille de cellule ajustée à l'aide de HTML et CSS

Pour résoudre le problème de la rotation du texte qui perturbe l'alignement des cellules en HTML tableaux, une approche plus précise est nécessaire. Au lieu d'utiliser des transformations CSS, nous pouvons utiliser les propriétés d'orientation et d'alignement du texte HTML et CSS.

L'extrait de code suivant utilise cette technique :

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

En appliquant le mode d'écriture propriété aux éléments de texte pivotés, nous forçons le texte à s'écouler perpendiculairement à l'axe de l'élément pivoté. Cela garantit un alignement correct et empêche le texte de déborder dans les cellules adjacentes.

Chrome ne prend notamment pas en charge la propriété writing-mode pour les éléments. Pour résoudre ce problème, nous enveloppons le texte dans un élément span et appliquons la propriété -webkit-writing-mode pour garantir la compatibilité entre navigateurs.

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!