如何在HTML表中迭代收藏夹,使用百叶窗在行中有限(n)列。
我是前端的新手,并使用百里叶。我正在寻找一种构建动态形式的方法。我正在从控制器到前端(HTML)发送地图,我能够使用以下代码和胸腺属性属性显示我的地图值,
<tr class="row" th:each="element : ${elementMap}">
<td th:text="${element.key}"></td>
<td>
<input type="text" id=${element.keyth:name=${element.key} th:value="${element.value}" /><br>
</td>
</tr>
我需要在一排中显示4列。或者,如果将上述地图转换为arrayList,则可以连续允许4列。但是,当我使用th:每个时&amp;&amp; TH:文本
用于迭代ArrayList的内容如何连续提及4列(任何CSS样式都可以使用)?还有其他方法可以解决此问题吗?
I am new to front end and using thymeleaf. I am looking for an approach to build a dynamic form. I am sending a map from controller to front end (html), I am able to display the values of my map using below code with thymeleaf attributes
<tr class="row" th:each="element : ${elementMap}">
<td th:text="${element.key}"></td>
<td>
<input type="text" id=${element.keyth:name=${element.key} th:value="${element.value}" /><br>
</td>
</tr>
I need to display 4 columns in a row. Or If converting above Map to ArrayList is it possible to allow 4 columns in a row. But when I use th:each && th:text
for iterating content of Arraylist how to mention 4 columns in a row (Any css style would be available)? Is there any other approach available to fix this ?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
在您的页面上,您正在为每条
元素
迭代一行,列是
td
标签,根据您告知的代码,这是每行两列(键和值)。但是,如果要限制列的数量,则可以使用CSS,但是通过代码的结构,您具有动态行(列表的每个元素为1行),并且每行只有两个列。
如果问题太多了,您只能放置最多4
td
标签on your page you are iterating one line for each
element
the columns are the
td
tags, which according to the code you informed are two columns per line (key and value).but if you want to limit the number of columns, you can use css, but by the structure of your code, you have dynamic lines (1 line for each element of the list) and you only have two columns per line.
if the problem is too many columns, you can only put up to 4
td
tags