Преобразовать таблицу вертикальный заголовок

Question

У меня есть таблица, как этот

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

Обычно, первый столбец будет показывать Number 1 2 (сверху вниз), а второй столбец Alphabet a b

Теперь я хотел бы конвертировать <thead> в вертикальное положение и <tbody> <tr> в вертикальное положение, так что Number 1 2 будет находиться в горизонтальной линии, а Alphabet a b будет находиться в другом горизонтальном направлении.

CSS

thead { 
    float: left; 
} 

thead th { 
    display: block; 
} 

tbody { 
    float: right; 
} 

thead поворачивается в вертикальное положение, но tbody tr не делает.

Кто-нибудь знает, как заставить его работать? THANKS

Answer 1

Почему вы не используете эту структуру, если таблица таблицы не будет динамически изменяться.

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

Мой друг, в этом состоянии, не используйте thead и tbody. Сделайте так,

<table> 
    <tr> 
    <th>Numbers</th> 
    <td>1</td> 
    <td>2</td> 
    </tr> 
    <tr> 
    <th>Alphabet</th> 
    <td>a</td> 
    <td>b</td> 
    </tr> 
</table> 

Answer 3

Не знаете, почему просто не меняйте расположение таблицы, но я думаю, у вас есть свои причины. В любом случае это не было легким :)

Вот код CSS

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; 
} 

и вот демка с YOUT структурой HTML таблицы: http://jsfiddle.net/darkosss/83kVc/

Надеется, что это помогает