我在我的私人项目表中做，通过数据库中的数据完成。我希望行在标题下垂直呈现（问题底部的截图）。我试过大多数解决这类问题的方法，但都不管用。也许我在逻辑上有些错误。你能帮我找到解决办法吗？
EJS：

<table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <% groups.forEach((group) => { %>
                                            <th><%= group.name %></th>
                                        <% }) %>
                                    </tr>
                                    
                                </thead>
                                <tbody>
                                    <% groups.forEach((group) => { %>
                                        <tr>
                                            <% group.items.forEach((item) => { %>
                                                <% if(item.name === group.overseer.name){ %>
                                                    <td><strong><%= item.name %></strong></td>
                                                <% } else { %>
                                                    <td><%= item.name %></td>
                                                <% } %>
                                                
                                            <% }) %>
                                        </tr>
                                        
                                        
                                    <% }) %>
                                </tbody>
                    
                            </table>

它看起来像

我希望它看起来像

CodePen