convert Table vertical Header - html

Question

I have a table like this
<table>
<thead>
<tr>
<th>Numbers</th>
<th>Alphabet</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>a</td>
</tr>
<tr>
<td>2</td>
<td>b</td>
</tr>
</tbody>
</table>
Normally, the first column will show Number 1 2(top to bottom) and the second column is Alphabet a b
Now, I'd like to convert <thead> to vertical and <tbody> <tr> to vertical so that Number 1 2 will be in a horizontal line and Alphabet a b will be in another horizontal one.
CSS
thead {
float: left;
}
thead th {
display: block;
}
tbody {
float: right;
}
The thead turns to vertical, but tbody tr doesn't.
Does anyone know how to get it work?
THANKS

Answer 1

Not sure why just don't change the table layout, but I guess you have your reasons.
Anyway this was not an easy one :)
Here's the CSS code
table{
display:block;
padding: 0px;
border-collapse:collapse;
border-spacing:0;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
thead{
display: block;
float: left;
margin: 0px;
padding: 0px;
width: 100px;
}
tbody{
margin: 0px;
padding: 0px;
}
tbody tr {
float:left;
}
th, td{
display:block;
padding: 5px;
margin: 0px;
}
thead > tr th:nth-child(odd) {
display:block;
float:left;
}
thead > tr th:nth-child(even) {
display:block;
float:left;
}
tbody > tr td:nth-child(odd) {
display:block;
}
tbody > tr td:nth-child(even) {
display:block;
float:right;
}
and here's the demo with yout HTML table structure:
http://jsfiddle.net/darkosss/83kVc/
Hope this helps

Answer 2

why dont you use this kind of structure if your table table is not going to change dynamically.
<table>
<tr>
<th>Numbers</th>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th>Alphabet</th>
<td>a</td>
<td>a</td>
</tr>
</table>

Answer 3

My friend, in this condition, don't use thead and tbody. Do like this,
<table>
<tr>
<th>Numbers</th>
<td>1</td>
<td>2</td>
</tr>
<tr>
<th>Alphabet</th>
<td>a</td>
<td>b</td>
</tr>
</table>