引导表中的行自动垂直对齐

Question

我正在我的私人项目表中进行操作，该表通过数据库中的数据完成。我希望行在标题下垂直呈现（问题底部的屏幕截图）。我尝试了此类问题的大部分解决方案，但它们不起作用。也许我的逻辑有问题。你能帮我找到解决方案吗？

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>

看起来怎么样

我想要它的样子，它应该是什么样子

代码笔

Answer 1

它应该看起来像这样：

<% groups.forEach((group, i) => { %>
   <tr>
      <% groups.forEach((group, j) => { %>
         <td><%= groups[j].items[i].name %></td>
      <% }) %>
   </tr>
<% }) %>

您可以根据需要调整条件，但这应该按照您想要的方式显示数据。