Comment faire pivoter le texte de 90 degrés dans des tableaux HTML avec une taille de cellule réglable ?

Comment faire pivoter le texte de 90 degrés avec une taille de cellule réglable en HTML

Lors de la rotation du texte dans des tableaux HTML, il est courant de rencontrer des difficultés pour maintenir la cohérence de la taille des cellules. Pour résoudre ce problème, explorons une solution qui utilise CSS et HTML sans avoir besoin de calculs de hauteur complexes.

L'astuce consiste à utiliser les propriétés CSS vertical-align et text-align pour ajuster l'orientation du texte dans les cellules du tableau. . De plus, nous utiliserons les propriétés -ms-writing-mode, -webkit-writing-mode et writing-mode pour permettre l'écriture verticale de texte.

Pour obtenir une rotation de 90 degrés, nous appliquons une transformation : rotation (180 degrés); pour garantir que le texte apparaisse verticalement. Notez que cette technique peut ne pas fonctionner parfaitement dans tous les navigateurs, notamment Chrome, qui nécessite l'utilisation de éléments pour corriger la direction du texte pour les en-têtes de tableau ().

Voici un exemple pratique pour démontrer :

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

Cette approche permet la rotation du texte dans cellules du tableau tout en préservant la taille de cellule souhaitée. Adoptez cette technique pour afficher facilement du texte vertical dans vos tableaux HTML, garantissant ainsi que vos données sont présentées de manière claire et élégante.

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!