Comment puis-je faire pivoter le texte verticalement dans des tableaux HTML en utilisant CSS ?

Rotation verticale du texte dans les tableaux HTML

La rotation du texte dans une cellule d'un tableau HTML de 90° perpendiculairement peut être obtenue à l'aide de transformations CSS. Cette méthode peut être appliquée à la fois aux en-têtes de texte et aux cellules de tableau ordinaires, permettant d'accueillir suffisamment de texte tout en optimisant l'utilisation de l'espace.

Technique de transformation CSS :

La propriété de transformation CSS permet de manipulation des caractéristiques visuelles des éléments, y compris la rotation. Voici un extrait CSS pour faire pivoter le texte :

<code class="css">.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 */
}</code>

Implémentation HTML :

Pour aligner le texte verticalement dans une cellule de tableau, attribuez la classe CSS à l'élément HTML approprié. :

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

Prise en charge des navigateurs :

Les transformations CSS et les techniques de filtrage garantissent la compatibilité entre navigateurs :

• Firefox 3.5
• Opera 10.5
• Safari 3.1
• Chrome
• Internet Explorer 6-8

Angle de rotation :

L'angle de rotation de 7,5 degrés est optimal pour la lisibilité. Cependant, vous pouvez l'ajuster pour répondre à vos besoins spécifiques.

Observations supplémentaires :

• Les préfixes CSS sont inclus pour une prise en charge plus large du navigateur.
• Assurez-vous que les éléments concernés ont une hauteur suffisante pour accueillir le texte pivoté.
• L'alignement du texte dans les cellules pivotées peut varier légèrement en fonction du navigateur et de la police utilisée.

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!