vishesh vishesh - 2 months ago 16
CSS Question

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

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


You can use <th> as the first cell in the row. Here's a fiddle:

@vishesh so you want to transpose your table after DOM ready? try this

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

        cell= 0;
        tem= $('<tr></tr>');
            next= r.eq(cell++).find('td').eq(0);