Using a List to simulate a dynamic Table with nested table with 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 need to wrap the new UL inside a div somewhere

    <li>
       <div class="div-cb">
            <input type="checkbox" value="on" />
        </div>

        <div>
            <ul class=" query_list_table sub_list_table">
                    <li class="header">
                        <div>AAAAA</div>
                        <div>BBBB</div>
                        <div>CCCCCCC</div>
                        <div>DDDD</div>
                    </li>

                    <li>
                        <div>XXXXXXXX</div>
                        <div>YYYYYYYYYY</div>
                        <div>ZZZZZZZZZZZZZZZZZZ</div>
                        <div>WW</div>
                    </li>

                     <li>
                        <div>XXXXXXXX</div>
                        <div>YYYYYYYYYY</div>
                        <div>ZZZZZZZZZZZZZZZZZZ</div>
                        <div>WW</div>
                    </li>

                     <li>
                        <div>XXXXXXXX</div>
                        <div>YYYYYYYYYY</div>
                        <div>ZZZZZZZZZZZZZZZZZZ</div>
                        <div>WW</div>
                    </li>
                 </ul>
        </div>
    </li>

http://jsfiddle.net/F9mXv/26/

One thing I don't know how to do is to replicate the "colspan" behaviour with this. as you can see it 's in the first cell and make it wider.

Answer 2

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