带有垂直行的 HTML 表格 [英] HTML Table with vertical rows

问题描述

如何在 HTML 中制作垂直表格?垂直，我的意思是行将是垂直的，表格标题在左侧.

How do I make vertical tables in HTML? By vertical, I mean the rows will be vertical with table headers on the left.

我也需要它，这样我就可以像在普通表中一样访问这些行(在这种情况下是垂直的)，使用 .这是因为我动态获取一行的数据(如 A 行)并将其插入表中.我使用 angularJS 来避免 DOM 操作，所以我不是在寻找使用 Javascript 进行复杂的 DOM 操作.

I also need it the way so I can access these rows (in this case vertical) as in a normal table, with <tr>. This is because I get the data dynamically for one row (like for row A) and insert it in the table. I am using angularJS to avoid DOM manipulation, so I am not looking for complex DOM manipulation with Javascript.

推荐答案

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

You can use <th> as the first cell in the row. Here's a fiddle: http://jsfiddle.net/w5nWG/

@vishesh 所以你想在 DOM 准备好后转置你的表格?试试这个 http://gist.github.com/pgaertig/2376975

@vishesh so you want to transpose your table after DOM ready? try this 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();
}

这篇关于带有垂直行的 HTML 表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！