Создание выпадающего меню для ячейки таблицы

Question

Я пытаюсь реализовать выпадающее меню для ячейки таблицы. Идея состоит в том, чтобы вывести список значений в раскрывающемся списке (потому что это трудно увидеть в одной ячейке таблицы). Я попробовал опцию перегрузки, но мне это не очень понравилось, потому что вы не можете увидеть все значения сразу, как вы можете, раскрыв раскрывающееся меню.

У меня есть две проблемы с моим кодом:

1) В моем раскрывающемся меню отображается только первый элемент, а не все при выполнении th: каждый из 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>

Как выглядит таблица при развертывании:

Как можноЯ собираюсь сделать это?