javascripthtmlcssdomhtml-table

HTML Table with vertical rows


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

enter image description here

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.


Solution

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


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