Javascript 具有垂直行的HTML表

如何在HTML中创建垂直表格？通过垂直，我的意思是行将是垂直的，表标题在左侧

---

我还需要它，这样我就可以像在普通表中一样使用

访问这些行（在本例中是垂直的）。这是因为我动态地获取一行的数据（如A行）并将其插入表中。我使用angularJS来避免DOM操作，所以我不想用Javascript进行复杂的DOM操作。

AFAIK，没有神奇的解决方案来改变这一点。 至于旋转（90度），这很可能会将整个桌子转向一边，类似于一张纸在旋转90度时的样子，而这不是你想要的（我想？）

如果这是可能的（并且是现实的），我建议在HTML本身中更改它

---

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

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

//更改选择器以满足您的需要
$（'table'）。每个（函数（）{
var table=$（this），//引用页面中的每个表
header=$（'thead'，table），//引用表头
headers=[]；//为每列设置一个数组
//如果表没有页眉，请将其页脚用于列标题
如果（！header.length）
页眉=$（'tfoot'，表格）；
//如果没有页眉和页脚，请跳到下一个表
如果（！header.length）
继续；
//循环每个标题以获取标题值
$（'th'，头）。每个（函数（）{
var heading=$（this.html（）；//每个标题值内容，包括任何html；使用.text（）仅使用文本
headings.push（heading）；//将heading值添加到数组中
});
//确保内容包装在tbody元素中以获得正确的语法
如果（！$（'tbody'，table）.length）
表1.wrapInner（“”）；
//设置计数器以引用标题数组中的标题
var x=0；
//循环遍历表中的每一行
$（'tbody tr'）。每个（函数（）{
var行=$（此），
标签=标题[x]；
//将标题添加到行中，作为视觉提示（默认值：粗体）
行。前置（“”+标签+“”）
//移动到标题值中的下一个值
x++；
});
});

您可以使用

作为行中的第一个单元格。 这是一把小提琴：

---

---

@vishesh那么您想在DOM就绪后转置您的表？试试这个

$（函数（）{
var t=$（“#表体”）.eq（0）；
var r=t.find（'tr'）；
var cols=r.长度；
变量行=r.eq（0）。查找（'td'）。长度；
var单元，next，tem，i=0；
变量tb=$（''）；
而（我试试这个

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

也许这个链接没有帮助：
这个人也不会：

否则，您可以尝试此操作，其他用户建议（拒绝并否决）：

这听起来很傻，但是，嘿，这并不比不知道“verry basic”HTML4表模型更糟糕。
如果你想
显示列，而不是行，试试这个简单的CSS

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

这将显示在使用单行单元格时所需的内容（删除表行为）


/*单行列设计*/
tr{display:block；float:left；}
th，td{显示：块；边框：1px纯黑色；}
/*边界塌陷*/
tr>*：非（：第一个子项）{边框顶部：0；}
tr:not（：first child）>*{border left:0；}

名称
数
詹姆斯·邦德
007
路西法
666
David Bushell在这里提供了一个解决方案和实现：

诀窍是在表的行和行上使用
display:inline block；
空白：nowrap；
在表体上


1.
2.
3.
表{边框折叠：折叠；}
表tr{display:block；float:left；}
表tr{display:block；float:left；}
表th，表td{显示：块；边框：无；}
这是一个普通的水平表格。您只是将标题排列到一列，然后将其向右浮动。这似乎是一个未完成的解决方案。@vishesh，那么您想在DOM就绪后转置您的表格吗？试试这个@Sean，这很遗憾。在我给出这个答案时，IE不是v11。而且它似乎不会存在太久，Microsoft可能会移动要修复该行为，您可以尝试设置
table，tbody{display:block；}
刚刚在IE11中对其进行了测试，效果良好。如果有任何问题，请发布您的链接。请记住，此解决方案将破坏边框折叠功能。@totymedli这一点值得注意。解决方案可能是从所有单元格中删除顶部和左侧边框，但第一行和列除外：
th:not（：first child），td:not（：first child）{边框顶部：0无；}tr:not（：first child）th，tr:not（：first child）td{边框左侧：0无；}
如何使表体水平滚动？这并不能回答问题。只是提出了一个建议，这显然不是问题的目的。@totymedli我添加了一个javascript片段来处理您的评论；但是，我仍然不知道有CSS选项来旋转表。这是一个可怕的解决方案。它会旋转所有内容甚至文本。这个问题要求换位，而不是轮换。你对错位讽刺的反对票是可以接受的。但我不会删除这个。
table, td, th {
  border: 1px solid red;   
}

thead {
  float: left;   
}


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

tbody {
  float: right;   
}

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

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

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