Comment faire pivoter le texte dans les cellules d'un tableau HTML à l'aide de transformations CSS ?

Rotation du texte dans les cellules d'un tableau HTML

Les tableaux HTML étant largement utilisés pour organiser et afficher des données tabulaires, la possibilité de faire pivoter le texte dans leur les cellules peuvent être bénéfiques dans des situations où l'espace est limité, en particulier pour les titres longs.

Utilisation des transformations CSS

Une solution robuste et portable pour faire pivoter le texte dans les tableaux HTML consiste à utiliser CSS se transforme. En utilisant les propriétés de transformation CSS3, vous pouvez réaliser des rotations de 90 degrés sans compromettre la disposition ou la fonctionnalité de la cellule. Le code CSS suivant montre comment faire pivoter le texte de 7,5 degrés :

<code class="css">.box_rotate {
    -moz-transform: rotate(7.5deg);
    -o-transform: rotate(7.5deg);
    -webkit-transform: rotate(7.5deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
}</code>

Exemple de mise en œuvre

Pour illustrer la mise en œuvre, considérons le code HTML suivant :

<code class="html"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div class="box_rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div></code>

Dans cet exemple, la classe box_rotate est appliquée au deuxième

, faisant pivoter son texte de 7,5 degrés. En conséquence, le texte de cette cellule spécifique est rendu verticalement, aligné verticalement dans la colonne du tableau.

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!

css css3 html for using class this display transform column table

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