CSSでtableの行列(縦横)を入れ替える

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

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 {
   padding: 1em;
}
tbody {
    display: flex;
    width: auto;
}
tbody tr {
    display: flex;
    flex-direction: column;
}