後からCSSのデザイン変更

<figure class="wp-block-table">
    <table class="has-fixed-layout">
        <tbody>
            <tr>
                <th colspan="2">分類</th>
                <th>花の種類</th>
            </tr>
            <tr>
                <td rowspan="3">春の花</td>
                <td>桜の仲間</td>
                <td>ソメイヨシノ、八重桜、枝垂れ桜</td>
            </tr>
            <tr>
                <td>チューリップ属</td>
                <td>赤チューリップ、黄チューリップ、ピンクチューリップ</td>
            </tr>
            <tr>
                <td>菜の花の仲間</td>
                <td>菜の花、カラシナ、ナズナ</td>
            </tr>
            <tr>
                <td rowspan="2">夏の花</td>
                <td>ひまわりの仲間</td>
                <td>ひまわり、ガーベラ、ルドベキア</td>
            </tr>
            <tr>
                <td>アサガオ属</td>
                <td>青アサガオ、赤アサガオ、白アサガオ</td>
            </tr>
        </tbody>
    </table>
</figure>

「分類」部分に width: 30% を適用するには、以下の方法でCSSを定義できます。

どちらの方法でも「分類」部分に幅を指定できますが、クラスを追加する方法のほうがより明示的で管理しやすいです。

方法 1: クラスを追加して指定

th.classification {
    width: 30%;
}

そして、HTMLの該当部分にクラスを追加:

<th colspan="2" class="classification">分類</th>

方法 2: nth-child セレクターを使用

もしクラスを追加せずに適用したい場合:

.has-fixed-layout th:nth-child(1) {
    width: 30%;
}

これは、<th> の最初のセルに適用されます。