HTML Table with vertical rows

Question

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

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.

Answer 1

If you want <tr> to display columns, not rows, try this simple CSS

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

This should display what you want as far as you work with single-line cells (table behavior is dropped).

/* single-row column design */
tr { display: block; float: left; }
th, td { display: block; border: 1px solid black; }

/* border-collapse */
tr>*:not(:first-child) { border-top: 0; }
tr:not(:first-child)>* { border-left:0; }

<table>
<tr>
    <th>name</th>
    <th>number</th>
</tr>
<tr>
    <td>James Bond</td>
    <td>007</td>
</tr>
<tr>
    <td>Lucipher</td>
    <td>666</td>
</tr>
</table>

Answer 2

David Bushell has provided a solution and implementation here: http://dbushell.com/demos/tables/rt_05-01-12.html

The trick is to use display: inline-block; on the table rows and white-space: nowrap; on the table body.