Maison  >  Article  >  interface Web  >  Comment créer des en-têtes de tableau verticaux avec CSS en HTML ?

Comment créer des en-têtes de tableau verticaux avec CSS en HTML ?

Patricia Arquette
Patricia Arquetteoriginal
2024-10-25 03:25:29410parcourir

How to Create Vertical Table Headers with CSS in HTML?

En-têtes de tableau verticaux en HTML

Dans les tableaux HTML standard, les lignes sont affichées horizontalement, avec les en-têtes de tableau situés en haut. Cependant, il existe des situations dans lesquelles vous souhaiterez peut-être créer des tableaux avec des lignes verticales et des en-têtes sur le côté gauche.

Pour y parvenir, vous pouvez utiliser CSS pour modifier l'affichage des lignes et des cellules du tableau. Un correctif CSS simple serait :

<code class="css">tr { display: block; float: left; }
th, td { display: block; }</code>

Ce code CSS force chaque ligne à s'afficher comme un élément de bloc et à flotter vers la gauche, créant ainsi des lignes verticales. L'affichage : bloc ; Le paramètre sur les cellules du tableau garantit qu'elles s'affichent également sous forme de blocs dans les lignes verticales.

Notez que cette solution CSS suppose que les cellules de votre tableau sont sur une seule ligne. Si vous avez des cellules multilignes, le comportement du tableau peut être perturbé.

Pour améliorer l'affichage, vous pouvez ajouter des règles CSS supplémentaires pour gérer les bordures et supprimer les bordures là où elles ne sont pas nécessaires :

<code class="css">/* single-row column design */
tr { display: block; float: left; }
th, td { display: block; border: 1px solid black; }

/* border-collapse */
tr>*:not(:first-child) { border-top: 0; }
tr:not(:first-child)>* { border-left:0; }</code>

Avec ce CSS, vous pouvez créer des tableaux avec des lignes verticales qui sont à la fois visuellement attrayantes et conserver la fonctionnalité des lignes accessibles via balises.

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