Using a List to simulate a dynamic Table with nested table with <ul> <li> HTML and CSS only

Question

I can create a dynamic table with <ul> and <li> wich adjusts sizes of columns depending on content.

but the proble is that when I apend a nested table inside a row, this nested table appears on the right of the row instead on bottom.

this is the structure:

<li>
  <div></div>
  <div></div>
  <div></div>
  <ul>
     <li>
       <div></div>
       <div></div>
       <div></div>
     </li>
  </ul>
</li>

Here is the full HTML and CSS code:

http://jsfiddle.net/F9mXv/25/

how can I put the nested table under the row?

Thanks!!!

Answer 1

You can move your nested table down simply by giving it its own row. Enclose it in a set of <li> </li> tags, and it will be below the previous row: JSFiddle