web-dev-qa-db-fra.com

Tableau HTML avec lignes verticales

Comment créer des tableaux verticaux en HTML? Par vertical, je veux dire que les rangées seront verticales avec les en-têtes de tableau à gauche.

enter image description here

J'ai également besoin de ce chemin pour pouvoir accéder à ces lignes (dans ce cas vertical) comme dans une table normale, avec <tr>. En effet, je récupère les données de manière dynamique pour une ligne (comme pour la ligne A) et les insère dans la table. J'utilise angularJS pour éviter les manipulations du DOM, donc je ne cherche pas de manipulations complexes du DOM avec Javascript.

javascripthtmlcssdomhtml-table
13
vishesh

Vous pouvez utiliser <th> comme première cellule de la ligne. Voici un violon: http://jsfiddle.net/w5nWG/

@vishesh vous voulez donc transposer votre table après que DOM soit prêt? essayez ceci http://Gist.github.com/pgaertig/2376975

$(function() {
    var t = $('#thetable tbody').eq(0);
    var r = t.find('tr');
    var cols= r.length;
    var rows= r.eq(0).find('td').length;
    var cell, next, tem, i = 0;
    var tb= $('<tbody></tbody>');

    while(i<rows){
        cell= 0;
        tem= $('<tr></tr>');
        while(cell<cols){
            next= r.eq(cell++).find('td').eq(0);
            tem.append(next);
        }
        tb.append(tem);
        ++i;
    }
    $('#thetable').append(tb);
    $('#thetable').show();
}
0
sebastian

Si vous voulez que <tr> affiche des colonnes, pas des lignes, essayez ce CSS simple

tr { display: block; float: left; }
th, td { display: block; }

Cela devrait afficher ce que vous voulez dans la mesure où vous travaillez avec des cellules monolignes (le comportement de la table est supprimé), voir le violon .

58
Jan Turoň

David Bushell a fourni une solution et une implémentation ici: http://dbushell.com/demos/tables/rt_05-01-12.html

L'astuce consiste à utiliser display: inline-block; sur les lignes de la table et white-space: nowrap; sur le corps de la table.

4
Pratyush

Si je comprends bien, il n’existe pas de solution magique pour inverser la tendance. En ce qui concerne une rotation (90 degrés), il est fort probable que la table entière s’écarterait, de la même manière qu’une feuille de papier si on se retournait 90 degrés, et ce n'est pas ce que vous voulez (je pense?).

Si cela est possible (et réaliste), je suggérerais de le modifier dans le code HTML lui-même.

Comme indiqué dans les commentaires, il n'y a aucune suggestion ici, alors voici une alternative javascript de base [même si ce n'est pas ce que vous cherchiez] en utilisant jQuery. Sans connaître votre expérience, j'ai pris le temps de tout commenter pour être sûr de bien comprendre le code.

// Change the selector to suit your needs
$('table').each(function(){
    var table       = $(this), // Reference each table in the page
        header      = $('thead', table), // Reference the table head
        headings    = []; // Set an array for each column

    // If the table doesn't have a header, use it's footer for column titles
    if(!header.length)
        header = $('tfoot', table);
    // If there's no header nor footer, skip to the next table
    if(!header.length)
        continue;

    // Loop each heading to get the header value
    $('th', header).each(function(){
        var heading = $(this).html(); // Each heading value content, including any HTML; use .text() to use the text only
        headings.Push(heading); // Add heading value to array
    });

    // Make sure the content is wrapped in a tbody element for proper syntax
    if(!$('tbody', table).length)
        table.wrapInner('<tbody></tbody>');

    // Set counter to reference the heading in the headings array
    var x = 0;

    // Loop through each row in the table
    $('tbody tr').each(function(){
        var row     = $(this),
            label   = headings[x];

        // Add the heading to the row, as a <th> for visual cues (default: bold)
        row.prepend('<th>'+label+'</th>')

        // Move to the next value in the headings value
        x++;
    });
});
0
davewoodhall
 <table>
     <tr><td>1</td></tr>
     <tr><td>2</td></tr>
     <tr><td>3</td></tr>
 </table>



 table { border-collapse: collapse; }
 table tr { display: block; float: left; }
 table tr tr{ display: block; float: left; }
 table th, table td { display: block; border: none; }
0
Nithiyakumar K