html - 另一个带有表格显示的全 Angular 嵌套列表

Question

我有一个使用 JS 组件呈现的列表，其结构灵 active 不高。另一方面，我可以根据自己的喜好调整 CSS。

这是我目前所拥有的:

ul,
table {
  display: table;
  border-spacing: 10px;
  margin: 0;
  padding: 0;
}
li,
tr {
  display: table-row;
  background-color: #f0f0f0;
}
li > div,
td {
  display: table-cell;
  padding: 5px;
}
.right {
  padding-left: 60px;
  text-align: right;
}

<!-- My structure -->

<ul>
  <li>
    <div class="right">Cell 1.1</div>
    <div>Cell 1.2</div>
    <div>
      <ul>
        <li>Nested cell 1</li>
        <li>Nested cell 2</li>
      </ul>
    </div>
  </li>
  <li>
    <div class="right">Cell 2.1</div>
  </li>
</ul>

<hr>

<!-- Ideal representation -->

<table>
  <tr>
    <td class="right">Cell 1.1</td>
    <td>Cell 1.2</td>
  </tr>
  <tr>
    <td colspan="2">
      <table>
        <tr>
          <td>Nested cell 1</td>
          <td>Nested cell 2</td>
          <tr>
      </table>
    </td>
    </tr>
    <tr>
      <td class="right">Cell 2.1</td>
    </tr>
</table>

Here's a JSFiddle for anyone who prefers it.

我主要需要两件事:

• 使第一列(“单元格 1.1”、“单元格 2.1”等)的宽度自动调整并增长以适应任何行的最宽内容(因此表格显示)
• 当任何元素/行中有嵌套列表时，将它们显示在父列表的下方，以全 Angular/全列显示(即在第 1 行和第 2 行之间)

我现在拥有的 CSS 是我最好的尝试。我从 block 布局开始，但始终无法实现适应整个列宽的流畅的第一列。我确实通过代码段中的 CSS 实现了第一个目标，但现在我的嵌套列表显示为普通单元格，因为它被限制在一列中。

该片段有两种场景:最上面的是我目前拥有的不完整场景，另一种是我想要的视觉结果，但具有我目前无法拥有的结构。

有没有办法在不改变HTML结构、不借助JS的情况下实现上述两个目标？

Answer 1

这可能就是您想要的，不要指望它会很漂亮，因为这是对 HTML/CSS 的屠杀，HTML 没有改变(甚至没有添加任何类)。

https://jsfiddle.net/9hfxzjwL/5/

对于原始更新的 css:

ul {
  list-style: none;
  display: table;
  padding: 0;
}

ul li {
  display: table;
  height: 100%;
}

ul li div:not(:nth-child(3)) {
  float: left;
  width: calc(50% - 10px);
  margin: 5px;
  display: table-cell;
  background: #6da5ff;
}

.right {
  text-align: right;
}

ul li div:nth-child(3) {
  clear: left;
  width: 100%;
}

ul li div ul {
  width: 100%;
}

ul li div ul li {
  display: inline-block;
  width: calc(50% - 10px);
  background: #6da5ff;
  vertical-align: top;
  margin: 5px;
}

li + li {
  width: 100%;
  margin: 10px 0;
}