web-dev-qa-db-fra.com

Comment créer des tableaux à partir de données de colonne au lieu de données de ligne au format HTML?

Selon cet article de W3 Schools , on peut créer un tableau de base en HTML comme ceci:

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

D'en haut, il semble que l'on entre les données par rangées.

J'ai une situation où je dois entrer toutes les données par colonnes. Est-ce que quelque chose comme ça est possible?

<table border="1">
    <tc>
        <td>row 1, cell 1</td>
        <td>row 2, cell 1</td>
    </tc>
    <tc>
        <td>row 1, cell 2</td>
        <td>row 2, cell 2</td>
    </tc>
</table>
htmlhtml-table
25
Village

Vous pouvez rendre des tableaux en colonnes en utilisant un tableau dans un tableau ...

<table>
<tr>
<td>
    <table>
        <thead>
            <tr>
                <td>column 1 header 1</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>column 1 row 1</td>
            </tr>
            <tr>
                <td>column 1 row 2</td>
            </tr>
        </tbody>
    </table>
</td>
<td>
    <table>
        <thead>
            <tr>
                <td>column 2 header 1</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>column 2 row 1</td>
            </tr>
            <tr>
                <td>column 2 row 2</td>
            </tr>
        </tbody>
    </table>
</td>
</tr>
</table>
17
Chris Green

Vous feriez mieux de rendre la table par rangées, puis d'utiliser javascript pour inverser la table.

http://jsfiddle.net/CsgK9/2/

Le code suivant inversera une table (cet exemple de code utilise jquery)


    $("table").each(function() {
        var $this = $(this);
        var newrows = [];

        $this.find("tr").each(function(){
            var i = 0;

            $(this).find("td").each(function(){
                i++;
                if(newrows[i] === undefined) { newrows[i] = $(""); }
                newrows[i].append($(this));
            });
        });

        $this.find("tr").remove();
        $.each(newrows, function(){
            $this.append(this);
        });
    });

METTRE À JOUR:

Voici une version qui fonctionne aussi avec les éléments: http://jsfiddle.net/zwdLj/

16
Aheho

Dans les navigateurs modernes, vous pouvez y parvenir en redéfinissant le comportement des balises TR et TD en CSS. Étant donné le code HTML dans votre question, attachez le prochain style CSS:

table {
	display: table;
}
table tr {
	display: table-cell;
}
table tr td {
	display: block;
}
<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 2, cell 1</td>
    </tr>
    <tr>
        <td>row 1, cell 2</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

12
Istvan

Je viens de faire cela en utilisant un groupe d’ultra remplis de lis, semblait bien plus propre que tout ce que je pouvais trouver. Vous devrez faire quelque chose comme ajouter une classe à tous les uls et définir son style pour qu'il affiche: inline-table.

@* pseudo html/razor *@
@foreach(var col in columns){
    <ul class='tableColumn'>
        foreach(var data in col){
            <li>data</li>
        }
    </ul>    
}

et un peu de style

.tableColumn {
    border: 1px solid;
    display: inline-table;
}
0
Fat Shogun