Maison  >  Article  >  interface Web  >  Comment faire pivoter le texte verticalement dans un tableau HTML ?

Comment faire pivoter le texte verticalement dans un tableau HTML ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-11-02 00:23:02378parcourir

How can I rotate text vertically in an HTML table?

Texte vertical dans les tableaux HTML

La rotation verticale du texte dans les cellules d'un tableau HTML est une requête courante pour optimiser l'espace dans les tableaux denses. Pour obtenir cet effet, une approche populaire exploite la propriété transform pour définir les styles CSS.

Une méthode implique l'utilisation de la propriété CSS rotate :

.box_rotate {
  -moz-transform: rotate(7.5deg);  /* FF3.5+ */
  -o-transform: rotate(7.5deg);  /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}

En appliquant ce style à un tableau cellule, le texte à l'intérieur sera pivoté de 7,5 degrés dans le sens inverse des aiguilles d'une montre :

<code class="html"><td>
  <div class="box_rotate">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</td></code>

Cette technique vous permet de transformer le texte verticalement, économisant ainsi efficacement de l'espace dans les tableaux avec des titres ou du texte longs.

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