이런 디자인을 구현하고 싶어요.

1. 왼쪽의 th 태그를 세로로 배열

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

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

2. 적응한 것 같지만 세로로 쓸 수는 없다

.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;
}