title: CSS Nested Lists as tables?
body: <p>I have the following list structure:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;ul class=&quot;clientlist&quot;&gt;
      &lt;li class=&quot;clientname&quot;&gt;
          &lt;span class=&quot;id&quot;&gt;IDxxx&lt;/span&gt;&lt;span class=&quot;name&quot;&gt;Hugo&lt;/span&gt;&lt;span class='clientcount'&gt;15&lt;/span&gt;
          &lt;ul class=&quot;fbllist&quot;&gt;
              &lt;li class=&quot;fbladdress&quot;&gt;
                  &lt;span class=&quot;address&quot;&gt;hugo@do.main&lt;/span&gt;&lt;span class=&quot;fblcount&quot;&gt;15&lt;/span&gt;
                  &lt;ul class=&quot;iplist&quot;&gt;
                      &lt;li class=&quot;ipstatus&quot;&gt;
                          &lt;span class=&quot;statustext&quot;&gt;active&lt;/span&gt;&lt;span class=&quot;statuscount&quot;&gt;15&lt;/span&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>which is nicely displayed, thanks to CSS like:</p>
  <ul>
  <li>IDxxx: Hugo (15)
  <ul>
  <li>hugo@do.main (15)
  <ul>
  <li>active: 15</li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  <p>Of course there are several Elements like this, so a list may look like this:</p>
  <ul>
  <li>IDxx1: Hugo1 (15)
  <ul>
  <li>hugo@do.main (15)
  <ul>
  <li>active: 15</li>
  </ul>
  </li>
  </ul>
  </li>
  <li>IDxx2: Hugo2 (14)
  <ul>
  <li>hugo2@do.main (14)
  <ul>
  <li>active: 11</li>
  <li>monitored: 3</li>
  </ul>
  </li>
  </ul>
  </li>
  <li>IDxx3: Hugo3 (15)
  <ul>
  <li>hugo3@do.main (15)
  <ul>
  <li>failed: 15</li>
  </ul>
  </li>
  </ul>
  </li>
  <li>IDxx4: Hugo4 (15)
  <ul>
  <li>hugo4@do.main (15)
  <ul>
  <li>active: 15</li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  <p>Now I'm trying to find a way to format this more &quot;table like&quot; and tried this css</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
    display: table;
  }
  
  li {
    display: table-row;
  }
  
  li span {
    display: table-cell;
  }
  
  span.ipcount,
  span.clientcount,
  span.statuscount {
    text-align: right;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="clientlist"&gt;
    &lt;li class="clientname"&gt;
      &lt;span class="id"&gt;IDxxx&lt;/span&gt;&lt;span class="name"&gt;Hugo&lt;/span&gt;&lt;span class='clientcount'&gt;15&lt;/span&gt;
      &lt;ul class="fbllist"&gt;
        &lt;li class="fbladdress"&gt;
          &lt;span class="address"&gt;hugo@do.main&lt;/span&gt;&lt;span class="fblcount"&gt;15&lt;/span&gt;
          &lt;ul class="iplist"&gt;
            &lt;li class="ipstatus"&gt;
              &lt;span class="statustext"&gt;active&lt;/span&gt;&lt;span class="statuscount"&gt;15&lt;/span&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Unfortunately, due to the fact that the <code>ul</code>s are nested within <code>li</code>s, the result is not quite what I hoped for. All the &quot;sub-tables&quot; (the nested <code>ul</code>s) are shown at the very right end of each &quot;row&quot; (<code>li</code>).</p>
  <p>Is there any way I can change it so that each &quot;sub-table&quot; is displayed like being in a new row without changing the structure?</p>
  <p>Update:
  This is what it looks like when I add borders to the tables (black) and cells (green)
  <a href="https://i.stack.imgur.com/8NoQi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8NoQi.png" alt="enter image description here" /></a></p>
  <p>I hoped for something like this:
  <a href="https://i.stack.imgur.com/XvRiG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XvRiG.png" alt="enter image description here" /></a></p>