Comment créer des tableaux HTML alignés verticalement avec un affichage basé sur des colonnes ?

Tableaux HTML alignés verticalement : obtenir un affichage basé sur des colonnes

Les tableaux verticaux, où les lignes sont affichées verticalement avec les en-têtes de tableau à gauche, présentent un défi unique en HTML. Voici une solution simple à ce problème, en utilisant CSS :

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

Cette approche inverse efficacement l'orientation des cellules du tableau, vous permettant d'y accéder en utilisant comme vous le feriez dans une table ordinaire. Cependant, il est important de noter que cette méthode traite chaque cellule comme une seule ligne, supprimant tous les comportements de type tableau tels que rowspan ou colspan.

Exemple :

Pour Pour illustrer cela, considérons le tableau HTML suivant balisé avec le CSS proposé :

<code class="html"><table>
  <tr>
    <th>name</th>
    <th>number</th>
  </tr>
  <tr>
    <td>James Bond</td>
    <td>007</td>
  </tr>
  <tr>
    <td>Lucipher</td>
    <td>666</td>
  </tr>
</table></code>

Le résultat sera un tableau aligné verticalement avec deux "lignes" (représentées sous forme de colonnes) et deux "colonnes" (représentées par lignes).

Considérations supplémentaires :

Pour garantir un rendu correct des bordures, vous pouvez ajouter le CSS suivant :

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

Cela supprimera le bordures supérieure et gauche de toutes les cellules sauf la première de chaque ligne (colonne), créant ainsi une apparence sans bordure.

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!