html - 使用列表模拟具有嵌套表的动态表 仅 HTML 和 CSS

Question

我可以创建一个动态表，<ul>并<li>根据内容调整列的大小。

但问题是当我在一行中附加一个嵌套表时，这个嵌套表出现在行的右侧而不是底部。

这是结构：

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

这是完整的 HTML 和 CSS 代码：

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

如何将嵌套表放在行下？

谢谢！！！

Answer 1

您需要将新的 UL 包装在 div 某处

    <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/

我不知道该怎么做的一件事是用这个来复制“colspan”行为。如您所见，它位于第一个单元格中并使其更宽。

Answer 2

您可以简单地通过给它自己的行来向下移动嵌套表。将它包含在一组<li> </li>标签中，它将位于上一行的下方： JSFiddle