将Thymeleaf列表元素划分为表格行

Question

我正在使用Thymeleaf在html页面上显示列表元素的属性，如下所示：

to("xslt:xslts/ics/MappingMapTostudents.xslt?saxon=true&output=file")

当然，这会在一行中显示图像和标题。我希望列表中的元素以三行显示。我怎样才能实现呢？我已经使用JavaScript进行过尝试，但是却遇到了java.lang.StackOverflowError：null，而且我敢肯定有比我尝试过的方法更简单的方法：

<table align="center">

    <tbody>
        <tr th:if="${movielist.empty}">
            <td colspan="2"> No movies found with the given parameters. </td>
        </tr>

        <tr>

            <td th:each="movie : ${movielist}">
                <table>
                    <tr>
                        <td><img th:src="@{${movie.imageLink}}" th:name="${movie.id}" onclick="selectElement(event)"/></td>
                    </tr>
                    <tr>
                        <td><a th:href="@{'/moviepage?id=' + ${movie.id}}" th:text="${movie.title}" align='center' /></td>
                    </tr>
                </table>
            </td>
        </tr>

    </tbody>
</table>

和包含

的主体

<script th:inline="javascript">

        var movielist = [[${movielist}]];
        function showMovielist() {
            var html = '<tr>';

            for (var i = 0; i < movielist.length; i++) {
                html += '<td><table><tr><td><img src="' + movielist[i].imageLink + '"name="' + movielist[i].id + '" onclick="selectElement(event)"/></td>';
                html += '</tr><tr><td>';
                html += '<td><a th:href="@{' + '/moviepage?id=' + movielist[i].id + '}"text="' + movielist[i].title + '" align="center" /></td>';
                html += '</table></td>';
                if ((i+1)%3===0) {
                    html +='</tr><tr>';
                }
            }
            html += '</tr>';
            var where = document.getElementById("placeOfMovieList");
            where.innerHTML = html;
        }
    </script>