Comment créer des en-têtes de tableau verticaux avec CSS en 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!