Richard Knop Richard Knop - 5 months ago 13
HTML Question

Table vertical header?

How can i make the table header appear on the left side of the table as a column instead on the top as a row? I have this markup:

<table>
<thead>
<tr>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>

Answer

How's this?

Example

Example

CSS

thead {
  float: left;   
}

thead th {
  display: block;   
}

tbody {
  float: right;   
}

jsFiddle.

Update

Well, the 1, 2 should also be as column, obviously.

jsFiddle.

It also looks like IE baulks at this. You may have to trade semantic-ness for cross browser compatibility.