tableの一部を上下に結合しつつ、その部分だけテキストを縦書きにしたいのですが、table全体からはみ出してしまいます。

Question

縦書きのcssを効かさず、横書きのままならイメージ通りなので、colspan,rowspanは合っていると思うのですが。解決策お分かりの方、ご教授下さい。

<table class="table">
<tbody>
<tr>
<th>項目１</th>
<th colspan="2">項目２</th>
</tr>
<tr>
<td>あ</td>
<td colspan="2">い</td>
</tr>

<tr>
<td>う</td>
<td colspan="2">え</td>
</tr>

<tr>
<td>お</td>
<td>か</td>
<td rowspan="4" class="vertical">この文章が
縦書きになります</td>
</tr>

<tr>
<td>き</td>
<td>く</td>
</tr>

<tr>
<td>け</td>
<td>こ</td>
</tr>

<tr>
<td>さ</td>
<td>し</td>
</tr>

</tbody>
</table>

.table td.vertical {
　 writing-mode: vertical-rl;
}

Answer 1

こちらの環境の問題だったようで、再読み込みで解決しました。お騒がせいたしました。