SpringBoot + Thymeleafでチェックボックスを任意の列で表示

環境

Spring Boot 2.7.11
Java 11

目的

コントローラーから取得したリストを基に任意の列で、チェックボックスを横並びにしたい

実装コード

<div class="form-group row">
    <details>
        <summary>LIST1</summary>
        <table style="margin-left: 60px; width: 90vw">
            <tr th:each="i : ${#numbers.sequence(0, list1.size() - 1, 3)}">
                <td th:each="value, status : ${list1.subList(i, i + 3 < list1.size() ? i + 3 : list1.size())}" 
                th:style="${list1.size()} >= 3 ? 'width: 30vw;' : (${status.index} % 3 == 0 ? 'width: 15vw;' : 'width: 30vw;')">
                    <input class="form-check-input" type="checkbox" th:value="${value}">
                    <label class="form-check-label" th:text="${value}"></label>
                </td>
            </tr>
        </table>
    </details>
</div>
<div class="form-group row">
    <details>
        <summary>LIST2</summary>
        <table style="margin-left: 60px; width: 90vw">
            <tr th:each="i : ${#numbers.sequence(0, list2.size() - 1, 3)}">
                <td th:each="value, status : ${list2.subList(i, i + 3 < list2.size() ? i + 3 : list2.size())}" 
                th:style="${list2.size()} > 2 ? 'width: 30vw;' : (${status.index} == 0 ? 'width: 15vw;' : 'width: 30vw;')">
                    <input class="form-check-input" type="checkbox" th:value="${value}">
                    <label class="form-check-label" th:text="${value}"></label>
                </td>
            </tr>
        </table>
    </details>
</div>

表示画面

説明

上記コードは3列で表示するもの
trタグのeachはコントローラーから受け取ったlist1というリストを3つずつ扱うために、
i : #numbers.sequence(from, to, step)1のstepを3と指定
Javaでいうfor (int i = 0; i < list1.size() - 1; i+=3)と同じ

tdタグのeachJavaの標準メソッドsubList(form, to)2でlist1を、
素数が3つずつになるようi+3までeach文を実行する

th:styleの三項演算子は、チェックボックス各々の幅をウィンドウのサイズに応じて、
単純にwidth: 30vw;で3分割できればよかったのだが、
リストのサイズが2の時だけ1つ目と2つ目のチェックボックスの間が広くなり、
他のグループの項目と2つ目のチェックボックスの位置がずれてしまうため、
一番最初の要素の幅だけ1/6のサイズに指定した
・リストサイズが1の時、幅によって少々ズレることがあったためth:styleの最初の条件を2未満に

注意

時間がなかったために、このような可読性の低いコードをVIEWに書くことになってしまい、
探せばもっと単純で簡単な実装方法があると思います。


  1. Thymeleafのユーティリティメソッド:Tutorial: Using Thymeleaf (ja)
  2. Java11ドキュメント:List (Java SE 11 & JDK 11 )