convert Table vertical Header

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 ab

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