HTML-Tabelle mit vertikalen Zeilen

Question

Wie mache ich vertikale Tabellen in HTML? Bei vertikal, meine ich, die Zeilen sind vertikal mit Tabellenüberschriften auf der linken Seite.

Ich brauche es auch die Art und Weise, so kann ich diese Zeilen zugreifen (in diesem Fall vertikal) wie in einem normalen Tisch, mit <tr>. Dies liegt daran, dass ich die Daten dynamisch für eine Zeile (wie für Zeile A) abrufe und in die Tabelle einfüge. Ich benutze angularJS, um DOM-Manipulation zu vermeiden, also suche ich nicht nach komplexen DOM-Manipulationen mit Javascript.

Answer 1

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

---

@vishesh, so dass Sie Ihren Tisch nach DOM bereit umzusetzen wollen? versuchen, 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(); 
} 

Answer 2

Sie können CSS-Transformationen verwenden, um die Tabelle zuerst um 90 Grad zu transformieren und dann den Text innerhalb jeder Zelle um 90 Grad zu drehen.

table { 
    position: absolute; 

    /* Webkit */ 
    -webkit-transform: rotate(90deg); 
    /* Firefox */ 
    -moz-transform: rotate(90deg); 

    /* IE */ 
    -ms-transform: rotate(90deg); 

    /* Opera */ 
    -o-transform: rotate(90deg); 

    top: 100px; /* adjust as per your need */ 
} 

table > tr > td > span.table-text { 
    -webkit-transform: rotate(-90deg); 
} 

Ich habe es nicht getestet. Nur eine Idee.

Answer 3

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

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

---

Wie in den Kommentaren angegeben, gibt es keinen Hinweis darauf, hier, hier ist also eine grundlegende Javascript Alternative [auch wenn dies nicht das, was Sie ist suchen] jQuery verwenden. Ohne Ihre Erfahrung zu kennen, habe ich mir die Zeit genommen, alles zu kommentieren, um sicher zu sein, dass Sie verstehen, was der Code macht.

// 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++; 
    }); 
}); 

Answer 4

versuchen, diese

<table> 
    <thead> 
    <tr> 
     <th>id</th> 
     <th>column1</th> 
     <th>column2</th> 
     <th>column3</th> 
     <th>column4</th> 
     <th>column5</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
    </tr> 
    </tbody> 
</table> 

css:

table, td, th { 
    border: 1px solid red; 
} 

thead { 
    float: left; 
} 


thead th { 
    display: block; 
    background: yellow; 
} 

tbody { 
    float: right; 
} 

Answer 5

Vielleicht nicht diesen Link helfen: rotate a table 90 degrees weder würde diese: http://www.w3.org/TR/html401/struct/tables.html

Andernfalls Du kannst das versuchen, hat ein anderes uns er schlug vor (abgelehnt und Downvoted):

table { 
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
-ms-transform: rotate(-90deg); 
-o-transform: rotate(-90deg); 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
} 

Das klingt albern, aber hey, es ist nicht schlimmer als nur nicht das ‚verry basic‘ HTML 4 Tischmodell zu kennen.

Answer 6

Wenn Sie <tr> wollen Spalten angezeigt werden, keine Zeilen, versuchen Sie diese einfache CSS

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

Dies sollte zeigen, was Sie so weit wollen, wie Sie mit einzeiligen Zellen arbeiten (Tabelle Verhalten fallen gelassen wird), siehe the fiddle.

Answer 7

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

Der Trick ist display: inline-block; auf den Tabellenzeilen und white-space: nowrap; auf dem Tisch Körper zu verwenden.

Answer 8

<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; }