Comment créer des tableaux verticaux en HTML ?

Rendu de tableau vertical en HTML

Traditionnellement, les tableaux HTML affichent les données horizontalement avec des lignes sur la page. Cependant, il existe des cas où vous pouvez avoir besoin de tableaux verticaux avec des lignes affichées verticalement, avec des en-têtes positionnés à gauche.

Pour y parvenir, CSS peut être utilisé pour modifier les propriétés d'affichage du tableau :

tr { display: block; float: left; }
th, td { display: block; }

Ce CSS fera en sorte que les lignes du tableau (éléments ) se comportent comme des colonnes, affichées verticalement. Les en-têtes de tableau () et les données du tableau () seront également affichés verticalement.

Cependant, il est important de noter que cette approche élimine le comportement du tableau, ce qui le rend inadapté aux tableaux classiques. opérations. Pour résoudre ce problème, vous pouvez utiliser CSS bordereffondrement :

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

Ce CSS garantit que les bordures n'apparaissent qu'entre les cellules du tableau (et non autour de la colonne entière), donnant l'apparence d'un tableau correctement bordé.

En implémentant ces règles CSS, vous pouvez créer des tableaux verticaux en HTML, offrant une plus grande flexibilité dans la présentation de vos données.

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!