Tableaux HTML verticaux

La création de tableaux HTML avec des lignes verticales offre une manière unique d'afficher les données, avec des en-têtes de ligne positionnés sur le côté gauche plutôt que vers le haut. Pour y parvenir, le style CSS peut être appliqué pour transformer la structure du tableau.

Style CSS

Pour afficher les lignes du tableau sous forme de colonnes verticales, les règles CSS suivantes peut être utilisé :

tr {
  display: block;
  float: left;
}

th, td {
  display: block;
}

Cela entraînera un flux vertical des cellules du tableau, les en-têtes correspondants apparaissant à gauche de chaque ligne.

Intégration AngularJS

Le maintien de l'accès aux lignes du tableau, désormais affichées sous forme de colonnes, peut être obtenu en incorporant les règles CSS suivantes :

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

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

Ces règles garantissent que les bordures entre les cellules du tableau sont affichées uniquement au niveau des bords, offrant ainsi une distinction claire entre les lignes. En utilisant ces techniques en conjonction avec AngularJS, vous pouvez manipuler dynamiquement les données du tableau tout en préservant l'orientation verticale.