ヘッダーが1列目にあるテーブルを作る方法

通常htmlでテーブルを作ると以下のような形になる。
<コード>

table.html

<table>
  <thead>
    <tr>
     <th>ヘッダーその①</th>
     <th>ヘッダーその②</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>あ</td>
      <td>い</td>
    </tr>
    <tr>
      <td>う</td>
      <td>え</td>
    </tr>
  </tbody>
</table>

<表示>

ヘッダーその①	ヘッダーその②
あ	い
う	え

でもヘッダーを1行目ではなくこんな感じで1列目にしたい事はわりとあると思う。

ヘッダーその①	あ	い
ヘッダーその②	う	え

それを素直にやろうとすると以下のようなコードになる

table2.html

<table>
  <tr>
    <th>ヘッダーその①</th>
    <td>あ</td>
    <td>い</td>
  </tr>
  <tr>
    <th>ヘッダーその②</th>
    <td>う</td>
    <td>え</td>
  </tr>
</table>

これでも良いのだけど、
個人的にすごい見づらいなぁと思ったので、htmlはそのままにCSSでどうにか出来ないかと考えた。
で、こねこねした結果がこちら。

table3.html

<!-- これはそのまま -->
<table>
  <thead>
    <tr>
      <th>ヘッダーその①</th>
      <th>ヘッダーその②</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>あ</td>
      <td>い</td>
    </tr>
    <tr>
      <td>あ</td>
      <td>い</td>
    </tr>
  </tbody>
</table>

table.css

thead  {
  float: left;
}
tbody  {
  display: inline-block;
}
thead th  {
  display: block;
}
tbody td  {
  display: block;
}
tbody tr{
  display: inline-block;
}

するとこんな感じになる。
https://jsfiddle.net/85eqhjn6/

一応出来たが、もっと上手い方法がある気がする。
CSS苦手なので頑張る。

以上