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

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

DDD
DDDoriginal
2024-10-31 19:27:29862parcourir

How to Rotate Text 90 Degrees in an HTML Table Without Messing Up Alignment?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn