Html Table struct for nested categories layout

Question

I have a table with many categories Currently, I am rendering them with tr tags, each category will be displayed in a child tag

But this causes the table layout to break when a parent cell has an increase in height

codepend: https://codepen.io/sayuto/pen/YzvPoBO

Where did I go wrong or does someone have a better idea how to do this? I have tried rendering a tr tag that will contain "parent" and "first child", "other children" will be rendered in the next tr, but this is very complicated, calculating rowspan is difficult.

I trying to find out the correct html table layout what I should to use to render table with nested categories

P/s: I am trying to render column by column (this makes it easier for us to gather data and load Building data structures and load data onto tables with default rendering (line by line) is a nightmare for both the writer and the maintainer (in this case - nested categories)

Answer 1

I made you this test code...

const
  myTable = document.querySelector('#my-table')
, depIn   = document.querySelector('input[type=range]')
, depInV   = document.querySelector('input[type=range] + span')
  ;
depIn.value = 1;
depInV.textContent = depIn.value + ' X';

depIn.oninput =_=>
  {
  depInV.textContent = depIn.value + ' X'
  myTable.rows[7].cells[0].innerHTML = Array( depIn.valueAsNumber ).fill('x').join('<br>')
  }

body {
  font-family      : Arial, Helvetica, sans-serif;
  font-size        : 14px;
  }
table {
  border-collapse  : separate;
  border-spacing   : 1px;
  background-color : darkblue;
  margin           : 1em;
  color            : black;
  font-size        : .8rem;
  }
th {
  background-color : lightgrey;
  padding          : .6em;
  min-width        : 3.2em;
  }
td {
  background-color : whitesmoke;
  padding          : .2em .6em;
  min-width        : 3.2em;
  min-height       : 1.5em;
  }

<p> any X you need... <br>
  <input type="range" min="1" max="10" value="1"><span>1</span>   
</p>
<table id="my-table">
  <thead> <tr> <th>Compagny</th> <th>Department</th> <th>Group</th> <th>Team</th> <th>Unit</th> </tr> </thead>
  <tbody>
    <tr>
      <td rowspan="9">.</td> <!-- Compagny      -->
      <td rowspan="3">.</td> <!-- Department L.1 -->
      <td rowspan="2">.</td> <!-- Group      L.1 -->
      <td>.</td>  <!-- Team      L.1 -->
      <td>.</td>  <!-- Unit      L.1 -->
    </tr>
    <tr>
      <td>.</td>  <!-- Team      L.2 -->
      <td>.</td>  <!-- Unit      L.2 -->
    </tr>
    <tr>
      <td>.</td> <!-- Group      L.2 -->
      <td>.</td>  <!-- Team      L.3 -->
      <td>.</td>  <!-- Unit      L.3 -->
    </tr>
    <tr>
      <td rowspan="3">.</td> <!-- Department L.2 -->
      <td>.</td> <!-- Group      L.3 -->
      <td>.</td>  <!-- Team      L.4 -->
      <td>.</td>  <!-- Unit      L.4 -->
    </tr>
    <tr>
      <td rowspan="2">.</td> <!-- Group      L.4 -->
      <td>.</td>  <!-- Team      L.5 -->
      <td>.</td>  <!-- Unit      L.5 -->
    </tr>
    <tr>
      <td>.</td>  <!-- Team      L.6 -->
      <td>.</td>  <!-- Unit      L.6 -->
    </tr>
    <tr>
      <td rowspan="3"> x </td> <!-- Department L.3 -->
      <td>.</td> <!-- Group      L.5 -->
      <td>.</td>  <!-- Team      L.7 -->
      <td>.</td>  <!-- Unit      L.7 -->
    </tr>
    <tr>
      <td rowspan="2">.</td> <!-- Group      L.6 -->
      <td>.</td>  <!-- Team      L.8 -->
      <td>.</td>  <!-- Unit      L.8 -->
    </tr>
    <tr>
      <td>.</td>  <!-- Team      L.9 -->
      <td>.</td>  <!-- Unit      L.9 -->
    </tr>
  </tbody>
</table>