CSSのみでtableの行列入れ替え

レスポンシブで行列入れ替えて表示したい、というようなケースがあったのでやってみました。
Safari, Chrome, Firefoxで確認してますが、どうかなあ。
flex使ってるからIE10以降だったら大丈夫なはず。
だから、ここだけモバイルファーストを破って、PC用にtable組んでから、mobile向けに行列入れ替えたら良いかもしれない。
どちらにせよ、中身の高さが揃ってないと駄目なのでフレキシブルな組み方では無いけれども内容固定のコンテンツだったら使えるかな。

HTML

<table>
    <thead>
        <tr>
            <th></th>
            <th>午前</th>
            <th>午後</th>
        </tr>
    </thead>
    <tbody>
        <tr><th>月</th><td>◯</td><td>◯</td></tr>
        <tr><th>火</th><td>◯</td><td>◯</td></tr>
        <tr><th>水</th><td>◯</td><td>◯</td></tr>
        <tr><th>木</th><td>◯</td><td>◯</td></tr>
        <tr><th>金</th><td>◯</td><td>◯</td></tr>
        <tr><th>土</th><td>-</td><td>-</td></tr>
        <tr><th>日</th><td>-</td><td>-</td></tr>
    </tbody>
</table>

CSS

table {
    width: auto;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    border-collapse: collapse;
    border-spacing: 0;
}
th,td {
        display: block;
        width: auto;
        padding: 1em;
        text-align: center;
        border-top: 1px solid #eee;
        border-left: 1px solid #eee;
}
thead {
    display: flex;
    float: left;
}
thead th:first-child:before {
   content: ' ';
   padding: 1em;
}
tbody {
    display: flex;
    width: auto;
}
tbody tr {
    display: flex;
    flex-direction: column;
}

プレビュー

参照

flex - CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/flex