it-swarm.com.de

HTML-Tabelle mit vertikalen Zeilen

Wie erstelle ich vertikale Tabellen in HTML? Mit vertikal meine ich, dass die Zeilen vertikal sind, mit Tabellenköpfen auf der linken Seite.

enter image description here

Ich brauche es übrigens so, dass ich auf diese Zeilen (in diesem Fall vertikal) wie in einer normalen Tabelle mit <tr> zugreifen kann. Dies liegt daran, dass ich die Daten dynamisch für eine Zeile (wie für Zeile A) erhalte und sie in die Tabelle einfüge. Ich verwende angleJS, um DOM-Manipulationen zu vermeiden. Daher suche ich nicht nach komplexer DOM-Manipulation mit Javascript.

13
vishesh

Sie können <th> als erste Zelle in der Zeile verwenden. Hier ist eine Geige: http://jsfiddle.net/w5nWG/


@vishesh also willst du deine tabelle nach DOM fertig transponieren? Probieren Sie diese 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

Wenn Sie möchten, dass <tr> Spalten und nicht Zeilen anzeigt, versuchen Sie es mit diesem einfachen CSS

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

Dies sollte anzeigen, was Sie wollen, solange Sie mit einzeiligen Zellen arbeiten (Tabellenverhalten wird verworfen), siehe die Geige .

58
Jan Turoň

David Bushell hat hier eine Lösung und Implementierung bereitgestellt: http://dbushell.com/demos/tables/rt_05-01-12.html

Der Trick besteht darin, display: inline-block; in den Tabellenzeilen und white-space: nowrap; im Tabellenkörper zu verwenden.

4
Pratyush

AFAIK, es gibt keine magische Lösung, um dies umzuschalten. Was eine Drehung (90 Grad) angeht, so würde dies wahrscheinlich den gesamten Tisch zur Seite drehen, ähnlich wie ein Blatt Papier aussehen würde, wenn Sie sich wenden 90 Grad, und das ist nicht das, was Sie wollen (denke ich?).

Wenn dies möglich (und realistisch) ist, würde ich vorschlagen, es im HTML selbst zu ändern.


Wie in den Kommentaren angegeben, gibt es hier keinen Vorschlag. Daher ist hier eine grundlegende JavaScript-Alternative [auch wenn dies nicht das ist, was Sie gesucht haben] mit jQuery. Ohne Ihre Erfahrung zu kennen, habe ich mir die Zeit genommen, alles zu kommentieren, um sicherzustellen, dass Sie bekommen, was der Code tut.

// 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