I'm currently working on a table for my personal project that populates with data from the database. I am trying to get the rows to display vertically under headings (see screenshot at the bottom of this question). I have attempted various solutions for this issue, but so far none have been successful. It's possible there may be a flaw in my logic. Could someone please assist me in finding a solution?
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>
Current Display: https://i.sstatic.net/dEc8y.png
Desired Display: https://i.sstatic.net/acmtH.png