CSS Nested Lists as tables?

Question

I have the following list structure:

<ul class="clientlist">
    <li class="clientname">
        <span class="id">IDxxx</span><span class="name">Hugo</span><span class='clientcount'>15</span>
        <ul class="fbllist">
            <li class="fbladdress">
                <span class="address">hugo@do.main</span><span class="fblcount">15</span>
                <ul class="iplist">
                    <li class="ipstatus">
                        <span class="statustext">active</span><span class="statuscount">15</span>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

which is nicely displayed, thanks to CSS like:

• IDxxx: Hugo (15)
  • hugo@do.main (15)
    • active: 15

Of course there are several Elements like this, so a list may look like this:

• IDxx1: Hugo1 (15)
  • hugo@do.main (15)
    • active: 15
• IDxx2: Hugo2 (14)
  • hugo2@do.main (14)
    • active: 11
    • monitored: 3
• IDxx3: Hugo3 (15)
  • hugo3@do.main (15)
    • failed: 15
• IDxx4: Hugo4 (15)
  • hugo4@do.main (15)
    • active: 15

Now I'm trying to find a way to format this more "table like" and tried this css

ul {
  display: table;
}

li {
  display: table-row;
}

li span {
  display: table-cell;
}

span.ipcount,
span.clientcount,
span.statuscount {
  text-align: right;
}

<ul class="clientlist">
  <li class="clientname">
    <span class="id">IDxxx</span><span class="name">Hugo</span><span class='clientcount'>15</span>
    <ul class="fbllist">
      <li class="fbladdress">
        <span class="address">hugo@do.main</span><span class="fblcount">15</span>
        <ul class="iplist">
          <li class="ipstatus">
            <span class="statustext">active</span><span class="statuscount">15</span>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Unfortunately, due to the fact that the uls are nested within lis, the result is not quite what I hoped for. All the "sub-tables" (the nested uls) are shown at the very right end of each "row" (li).

Is there any way I can change it so that each "sub-table" is displayed like being in a new row without changing the structure?

Update: This is what it looks like when I add borders to the tables (black) and cells (green)

I hoped for something like this:

Answer 1

Thanks to G-Cyrillus I now have this CSS as a solution.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.clientlist {
    display: grid;
    grid-template-columns: 100%;
    row-gap: 0.5em;
}
.clientname {
    display: grid;
    grid-template-columns: 6em 2em 2em min(10em) 6em;
    grid-template-areas: 
        "id name name name count"
        ".. fbl  fbl  fbl  fbl"
    ;
    justify-items: start;
}
.id {
    grid-area: id;
}
.name {
    grid-area: name;
}
.clientcount {
    grid-area: count;
    justify-self: end;
}
.fbllist {
    grid-area: fbl;
}
.fbladdress {
    display: grid;
    grid-template-columns: 2em 2em min(10em) 6em;
    grid-template-areas: 
        ". address address fblcount"
        ". status  status  status"
    ;
    justify-items: start;
}
.address {
    grid-area: address;
}
.fblcount {
    grid-area: fblcount;
    justify-self: end;
}
.iplist {
    grid-area: status;
}
.ipstatus {
    display: grid;
    grid-template-columns: 2em min(10em) 6em;
    grid-template-areas: 
        ". statustext statuscount"
    ;
    justify-items: start;
}
.statustext {
    grid-area: statustext;
}
.statuscount {
    grid-area: statuscount;
    justify-self: end;
}

Answer 2

You can make a mix of table/grid and contents display to achieve something mostly alike your goal:

example

.clientlist,
li,
span {
  box-shadow: 0 0 0 1px;/* or border */
}

.clientlist {
  display: table;
}

.clientname {
  display: grid;
  grid-template-columns: 1fr auto auto;
}

.ipstatus {
  display: contents;
}

.fbladdress,
.iplist {
  display: grid;
  grid-template-columns: 1fr auto
}

<ul class="clientlist">
  <li class="clientname">
    <span class="id">IDxxx1</span><span class="name">Hugo</span><span class='clientcount'>15</span>
    <ul class="fbllist">
      <li class="fbladdress">
        <span class="address">hugo@do.main</span><span class="fblcount">15</span>
        <ul class="iplist">
          <li class="ipstatus">
            <span class="statustext">active</span><span class="statuscount">15</span>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="clientname">
    <span class="id">IDxxx2</span><span class="name">Hugo2</span><span class='clientcount'>15</span>
    <ul class="fbllist">
      <li class="fbladdress">
        <span class="address">hugo@do2.main</span><span class="fblcount">14</span>
        <ul class="iplist">
          <li class="ipstatus">
            <span class="statustext">active</span><span class="statuscount">13</span>
          </li>
          <li class="ipstatus">
            <span class="statustext">monitored</span><span class="statuscount">1</span>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>