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">[email protected]</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)
- [email protected] (15)
  - active: 15

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

IDxx1: Hugo1 (15)
- [email protected] (15)
  - active: 15
IDxx2: Hugo2 (14)
- [email protected] (14)
  - active: 11
  - monitored: 3
IDxx3: Hugo3 (15)
- [email protected] (15)
  - failed: 15
IDxx4: Hugo4 (15)
- [email protected] (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">[email protected]</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:

What could possibly be your motivation for all that? Why not just use a modern grid (or a table)? What's the benefit of using list markup? — isherwood
– isherwood, Commented Nov 18, 2021 at 13:39
what is it suppose to look alike ? display:contents allows you to make subchild be direct child without touching the markup. You can use either table/flex or grid , whatever suits your behavior needs. From your bit of HTML, is that supposed to be a row, 2 rows, 3 rows, something else ? — G-Cyrillus
– G-Cyrillus, Commented Nov 18, 2021 at 13:43
Simply assume, isherwood that there is no benefit in using list markup, but that it is simply there. G-Cyrillus I've added two screenshots. — Skeeve
– Skeeve, Commented Nov 18, 2021 at 14:31

G-Cyrillus · Accepted Answer · 2021-11-18 15:34:15Z

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">[email protected]</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">[email protected]</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>

answered Nov 18, 2021 at 15:34

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Skeeve Over a year ago

Thanks G-Cyrillus. That gives me something to play with. I never yet saw display: grid nor 1fr. Something to learn.

Skeeve · Accepted Answer · 2021-11-19 13:35:48Z

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;
}

Collectives™ on Stack Overflow

CSS Nested Lists as tables?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related