Repeater friendly vertical HTML table

Question

I need a table with vertical columns. One way to do it is like this:

<table>
  <tr>
    <th>HEADER 1</th>
    <td>X</td>
    <td>Y</td>
    <td>Z</td>
  </tr>
  <tr>
    <th>HEADER 2</th>
    <td>X</td>
    <td>Y</td>
    <td>Z</td>
  </tr>
  <tr>
    <th>HEADER 3</th>
    <td>X</td>
    <td>Y</td>
    <td>Z</td>
  </tr>
</table>

However this is not entirely possible when you get the data dynamically from your back-end and use some kind of repeater to display it in the table.

I have made an attempt based on this answer but I wasn't successful.

<table>
  <thead>
    <tr><th colspan="1">HEADER 1</th></tr>
    <tr><th colspan="1">HEADER 2</th></tr>
    <tr><th colspan="1">HEADER 3</th></tr>
  </thead>
  <tbody>
    <tr><td>x</td></tr>
    <tr><td>y</td></tr>
    <tr><td>z</td></tr>

    <tr><td>x</td></tr>
    <tr><td>y</td></tr>
    <tr><td>z</td></tr>
  </tbody>
</table>

question from:https://stackoverflow.com/questions/65922210/repeater-friendly-vertical-html-table

Answer 1

Waitting for answers