Comment créer des tableaux HTML verticaux avec CSS et AngularJS ?

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, un 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é :

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

th, td {
  display: block;
}</code>

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 :

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

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

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

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!