Question

如何在HTML中制作垂直表格？纵向，我的意思是行将是垂直的，左边是表头。

enter image description here

我也需要它，所以我可以使用<tr>访问这些行（在本例中为垂直），就像在普通表中一样。这是因为我动态获取一行数据（如行A）并将其插入表中。我使用angularJS来避免DOM操作，所以我不是在寻找使用Javascript的复杂DOM操作。

Answer 1

如果您希望<tr>显示列而不是行，请尝试使用此简单的CSS

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

当您使用单行单元格时，这应该显示您想要的内容（表行为被删除），请参阅the fiddle。

Answer 2

David Bushell在此提供了解决方案和实施：http://dbushell.com/demos/tables/rt_05-01-12.html

诀窍是在表格行上使用display: inline-block; 桌面上有white-space: nowrap;。

Answer 3

AFAIK，没有神奇的解决方案来切换它。至于旋转（90度），这很可能将整个桌子转到一边，类似于你翻转90度后纸张的样子，这不是你想要的（我想？）。 p>

如果这是可能的（也是现实的），我建议在HTML中更改它。

正如评论中所指出的，这里没有任何建议，所以这里有一个基本的javascript替代[即使这不是你想要的]使用jQuery。在不了解您的经验的情况下，我花时间对所有内容进行评论，以确保您获得代码正在执行的操作。

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

您可以使用<th>作为行中的第一个单元格。这是一个小提琴：http://jsfiddle.net/w5nWG/

@vishesh所以你想在DOM准备好之后转换你的表吗？试试这个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 5

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

Answer 6

您可以使用css变换首先将表格转换90度，然后将每个单元格内的文本旋转90度。

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

我还没有测试过它。只是一个想法。

Answer 7

试试这个

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

也许此链接无效：rotate a table 90 degrees 这个也不会：http://www.w3.org/TR/html401/struct/tables.html

否则，你可以尝试这个，有另一个用户建议（拒绝和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);
}

这听起来很傻，但是嘿，这并不比仅仅不知道'基本的'HTML 4表格模型更糟糕。

带有垂直行的HTML表

8 个答案: