HTML Table with vertical rows

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.

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>