thymeleaf设置css样式，矩形百分比填充背景色

最新推荐文章于 2022-10-09 17:27:29 发布

原创最新推荐文章于 2022-10-09 17:27:29 发布 · 1.4w 阅读

6 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种在网页上展示调查结果统计的方法，通过在div的style中拼接后台参数，实现了以进度条形式显示各选项百分比的功能。具体实现包括使用th:each遍历选项，设置div的宽度为百分比，直观呈现投票结果。

对调查结果进行统计的页面，在div的style中拼接后台参数，显示百分比

<tr th:each="option:*{obj.list}">
	<td th:text="*{option.title}">选项</td>
	<td th:text="*{option.poll}">小计</td>
	<td th:inline="text">
        <div style="float:left;width:160px; height:15px;
            margin:3px 10px 0 10px;border-style:solid;border-width:1px;">
            <div th:style="'background:#5f8dd4;height:15px;width:'+*{option.rate}+''">
            </div>
        </div>
        <span>[[*{option.rate}]]</span>
    </td>
</tr>

显示效果