Question

71

HTML Table with vertical rows

rated 0 times [ 76] [ 5] / answers: 1 / hits: 59761 / 11 Years ago, tue, june 4, 2013, 12:00:00

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

enter

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kiley

Add To Favorites

Follow

Total Points: 733

Total Questions: 118

Total Answers: 94

Location: Liechtenstein

Member since Wed, Dec 8, 2021

3 Years ago

answered 11 Years ago devlin · Accepted Answer

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

}