为表格单元格创建下拉菜单

Question

我正在尝试为表格单元实现下拉菜单。这个想法是在下拉列表中列出一堆值（因为很难在单个表单元格中看到它）。我尝试了重载选项，但是我不太喜欢它，因为您无法像展开扩展菜单一样一次看到所有值。

我的代码有两个问题：

1）我从下拉菜单中仅列出了第一项，而不是从Thymeleaf进行的每项列出。

2）我想在表格单元格中显示第一项，并希望在表格单元格中具有下拉箭头，而不是像现在这样在表格单元格中包含一个单独的下拉按钮。

我相关的HTML：

<section class="py-5">
    <table id="dtVerticalScrollExample" class="table table-striped table-bordered table-sm" cellspacing="0"
           width="100%">
        <thead>
        <tr>
            <th class="th-sm">User ID
            </th>
            <th class="th-sm">Username
            </th>
            <th class="th-sm">User Email
            </th>
            <th class="th-sm">User Roles
            </th>
            <th class="th-sm">
            </th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="user : ${userList}">
            <th scope="row"><span th:text="${user.id}"></span></th>
            <td><span th:text="${user.username}"></span></td>
            <td><span th:text="${user.email}"></span></td>
            <td>
                <div class="btn-group m-r-10">
                    <button aria-expanded="false" data-toggle="dropdown" class="btn btn-info dropdown-toggle waves-effect waves-light" type="button">Dropdown <span class="caret"></span></button>
                    <ul role="menu" class="dropdown-menu" th:each="role, stat : ${user.roles}">
                        <li><span th:text="${role.role}"></span></li>
                    </ul>
                </div>

            </td>
            <td>@mdo</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <th class="th-sm">User ID
            </th>
            <th class="th-sm">Username
            </th>
            <th class="th-sm">User Email
            </th>
            <th class="th-sm">User Roles
            </th>
            <th class="th-sm">
            </th>
        </tr>
        </tfoot>
    </table>
</section>

部署后的表格如下：

我该怎么做？