Regroupement des données de table en colonnes plutôt qu'en lignes

La plupart du temps, il est logique d'organiser les données de table en lignes. Cependant, en ce moment, j'ai affaire à une table qui compare les données entre plusieurs colonnes. Chaque colonne est un produit, je souhaite donc regrouper toutes les données produit. En utilisant la balise TR que cette ligne exécutera horizontalement, est-il possible de la faire fonctionner verticalement?Regroupement des données de table en colonnes plutôt qu'en lignes

Mise à jour: je voudrais la table pour afficher comme html régulièrement dans cet exemple:

<tr> 
    <td>Name</td> 
    <td>Name2</td> 
</tr> 
<tr> 
    <td>Price</td> 
    <td>Price2</td> 
</tr> 
<tr> 
    <td>Weight</td> 
    <td>Weight2</td> 
</tr> 
<tr> 
    <td>Height</td> 
    <td>Height2</td> 
</tr>

Cependant, je voudrais être en mesure de coder en fonction du contenu lié:

<tr> 
    <td>Name</td> 
    <td>Price</td> 
    <td>Weight</td> 
    <td>Height</td> 
</tr> 

<tr> 
    <td>Name</td> 
    <td>Price</td> 
    <td>Weight</td> 
    <td>Height</td> 
</tr>

En Autrement dit, je veux que l'étiquette de la ligne du tableau (tr) agisse comme une colonne.

Source

2010-08-09 Philip Zaengle

<tr> 
    <td>Name</td> 
</tr> 
<tr> 
    <td>Price</td> 
</tr> 
<tr> 
    <td>Weight</td> 
</tr> 
<tr> 
    <td>Height</td> 
</tr> 
<tr> 
    <td>Compatibility</td> 
</tr> 
<tr> 
    <td>Designer</td> 
</tr> 
<tr> 
    <td>Manufacturer</td> 
</tr> 
<tr> 
    <td>Age Requirement</td> 
</tr>

Si vous voulez un autre produit à côté, vous feriez:

<tr> 
    <td>Name</td> 
    <td>Name2</td> 
</tr> 
<tr> 
    <td>Price</td> 
    <td>Price2</td> 
</tr> 
<tr> 
    <td>Weight</td> 
    <td>Weight2</td> 
</tr> 
<tr> 
    <td>Height</td> 
    <td>Height2</td> 
</tr> 
<tr> 
    <td>Compatibility</td> 
    <td>Compatibility2</td> 
</tr> 
<tr> 
    <td>Designer</td> 
    <td>Designer2</td> 
</tr> 
<tr> 
    <td>Manufacturer</td> 
    <td>Manufacturer2</td> 
</tr> 
<tr> 
    <td>Age Requirement</td> 
    <td>Age Requirement2</td> 
</tr>

Source

2010-08-09 14:12:36 RedFilter

Le problème avec cela est quand il y a 4 colonnes. C'est toujours le regroupement par rangée. –

@Phil: voir ma mise à jour. – RedFilter

J'ai pensé à utiliser plusieurs tables, mais cela ne fonctionnera pas car si un élément de ligne de comparaison est à plusieurs lignes et que ses équivalents sont à une seule ligne, nous rencontrerons des problèmes d'alignement à moins de forcer chaque hauteur de cellule. –

Cette solution peut ne pas fonctionner sur les anciens navigateurs, mais quelque chose le long des lignes de cette approche fonctionne généralement pour moi:

<style> 
    .col { 
    display: table-cell; 
    } 
</style> 

<body> 
    <div class="col">Column 1</div> 
    <div class="col">Column 2</div> 
    <div class="col">Column 3</div> 
</body>

Source

2013-05-03 15:25:06 Roberto

Regroupement des données de table en colonnes plutôt qu'en lignes

Répondre

Questions connexes