Verschachtelte Tabelle mit Tabellenlayout

[heinetz]

Hallo Forum,

ich stehe vor der Aufgabe, eine verschachtelte Liste mit css zu gestalten, ohne die HTML-Struktur verändern zu können.

Meine Liste sieht wie folgt aus:

<ul class="menu">
 <li class="has-children">
  <a>A</a>
  <ul class="sub-menu">
   <li><a>A1</a></li>
   <li><a>A2</a></li>
   <li><a>A3</a></li>
  </ul>
 </li>
 <li class="has-children">
  <a>B</a>
  <ul class="sub-menu">
   <li><a>B1</a></li>
   <li><a>B2</a></li>
   <li><a>B3</a></li>
  </ul>
 </li>
 <li class="has-no-children">
  <a>C</a>
 </li>
 <li class="has-no-children">
  <a>D</a>
 </li>
 <li class="has-no-children">
  <a>E</a>
 </li>
</ul>

Mit einer HTML-Tabelle würde ich das Layout wie folgt umsetzen:

<table>
 <tr>
  <td rowspan="3">A</td>
  <td rowspan="3">B</td>
  <td>C</td>
 </tr>
 <tr>
  <td>D</td>
 </tr>
 <tr>
  <td>E</td>
 </tr>
</table>

(A-E sind die li[class="$children"])

Alle Listen nebeneinander darzustellen geht einfach mit display:table-cell. Aber wie ich die letzten drei li[class="has-no-children"] untereinander darstelle, weiss ich nicht.

Hat jemand einen Lösungsvorschlag?

danke und

beste gruesse, heinetz