我的表格帶有旋轉標題，在 Chrome 中看起來符合預期，但在 Firefox 中卻不是。

Chrome v108（垂直底部，水平中間）✅

Firefox v107（垂直中間，水平右）❌

如何讓它們跨瀏覽器工作，以便它們垂直旋轉、垂直位於單元格底部、水平居中並佔用最小寬度？

我使用的程式碼對此答案進行了稍微修改，以使其在 Chrome 中工作：

table { border-collapse:collapse; font-family:sans-serif }
thead th {
    /* Rotate vertical: https://stackoverflow.com/a/47245068 */
    -ms-writing-mode:tb-rl;
    -webkit-writing-mode:vertical-lr;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    vertical-align:middle;
    text-align:left;
    padding:0.5em 0 0 0;
    opacity:0.5;
    font-size:90%;
}
tbody th { text-align:right; padding-right:0.5em }
tbody td { text-align:center; padding:0 0.2em }
.yes { font-weight:bold; color:#060 }
.maybe { color:#440 }
.no  { color:#500 }

<table><thead><tr>
    <th></th>
    <th class="yes">yes</th>
    <th class="maybe">maybe</th>
    <th class="no">no</th>
    <th>who?</th>
</tr></thead><tbody><tr>
    <th>Fri, Dec 9, 12pm</th>
    <td class="yes">2</td><td class="maybe">1</td><td class="no">1</td>
    <td><button>≡</button></td>
</tr><tr>
    <th>Wed, Dec 14, 12pm</th>
    <td class="yes">4</td><td class="maybe">0</td><td class="no">0</td>
    <td><button>≡</button></td>
</tr><tr>
    <th>Fri, Dec 16, 12pm</th>
    <td class="yes">0</td><td class="maybe">0</td><td class="no">1</td>
    <td><button>≡</button></td>
</tr></tbody></table>