縦書きにするCSS「writing-mode」がtableタグの中で効かない時

検証 → iOS 13.1.3 、ブラウザ: Chrome, Safari
※見ているデバイスや、サイトのHTML・CSSなどの構成によっては下記の通りにならないかもしれません。

こんなデザインを実現したい

スマートフォンのデザイン。

左側のthを縦書きにしたい。
tdはrowspanやcolspanで合体している。

1.左側のthタグを縦書きにするには

thタグに直接writing-modeをかけてもならなかった。
spanタグで囲んでspanにwriting-modeをかけると適応された。

writing-mode
https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode

<tr>
    <th><span>縦書き</span></th>
</tr>

.table tr:not(:first-child) th span {
    writing-mode: vertical-lr;
}

2.適応はできたようだけど、縦書きにならない

thタグに高さ(min-height)を指定して解決した！
潰れていた模様。

.table tr:not(:first-child) th {
    min-height: 3.6em;
}

全てのHTMLとCSS

※ 一部の細かいところは省略

<table class="table">
    <tr class="title">
        <td></td>
        <th>タイトル</th>
        <th>タイトル</th>
    </tr>
    <tr>
        <th><span>縦書き</span></th>
        <td rowspan="2" colspan="2">
            <strong>テキストが入ります</strong><br>
            <span>テキストテキストテキストテキストテキスト</span><br>
            <span>※ テキストが入ります。</span>
        </td>
    </tr>
    <tr>
        <th><span>縦書き</span></th>
    </tr>
</table>

.table {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-collapse: collapse;
    letter-spacing: .1em;
    margin: 0 0 20px;
}
.table th,
.table td {
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
.table td {
    line-height: 1.8;
    padding: 20px 6%;
    text-align: center;
}
.title th {
    background: #efefef;
}
.table tr:first-child th {
    padding: 17px 2% 18px;
    width: 43%;
}
.table tr:not(:first-child) th {
    background: #e3e3e3;
    letter-spacing: .2em;
    min-height: 3.6em;
    padding: 1em 1%;
    width: 1.5em;
}
.table tr:not(:first-child) th span {
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
}