使用列表来模拟带有嵌套表格的动态表格，仅带有 <ul> <li> HTML 和 CSS答案

【问题标题】：Using a List to simulate a dynamic Table with nested table with <ul> <li> HTML and CSS only使用列表来模拟带有嵌套表格的动态表格，仅带有 <ul> <li> HTML 和 CSS
【发布时间】：2014-10-23 14:58:34
【问题描述】：

我可以使用<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/

如何将嵌套表放在行下？

谢谢！！！

【问题讨论】：

这是一个您制作的列表，看起来像一张桌子，而不是一张桌子。
标题已更正。谢谢

标签： html css list html-lists nested-table

【解决方案1】：

您可以将嵌套表向下移动，只需为其指定一行即可。将其包含在一组<li> </li> 标签中，它将位于上一行的下方：JSFiddle

【讨论】：

【解决方案2】：

您需要将新的 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”行为。如您所见，它位于第一个单元格中并使其更宽。

【讨论】：

谢谢，您的解决方案很好，但不同之处在于将嵌套的 ul 包含在
中。你这样做了，但@GentlePurpleRain 的解释提到了它。