Comment faire pivoter le texte verticalement dans un tableau HTML ?

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!