Html 带表格显示的另一个内的全宽嵌套列表

我有一个使用JS组件呈现的列表，在结构上不允许有太多的灵活性。另一方面，CSS可以根据自己的喜好进行调整

以下是我目前掌握的情况：

ul，
桌子{
显示：表格；
边界间距：10px；
保证金：0；
填充：0；
}
锂，
tr{
显示：表格行；
背景色：#f0；
}
李>部门，
运输署{
显示：表格单元格；
填充物：5px；
}
.对{
左侧填充：60px；
文本对齐：右对齐；
}

单元格1.1
单元格1.2

嵌套单元格1
嵌套单元2



单元格2.1



单元格1.1
单元格1.2
嵌套单元格1
嵌套单元2
单元格2.1

这可能就是你想要的，不要期望它很漂亮，因为这是对HTML/CSS的一次屠杀，HTML是不变的（甚至没有添加任何类）

对于原始更新的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;
}

---

毫不奇怪，这个解决方案比我最初想要的更接近我的理想表达。self注意：如果我想要类似于表的行为来显示表格数据，也许常规表不是一个坏主意

无论如何，问题是因为我使用VueJS组件，它们的模板中只能有一个根元素。在我看来，根元素要么是

tr

要么是

li

，因为它们代表我的表格数据行。这意味着我陷入了死胡同，因为如果使用一个表，我需要多个

tr

，或者如果我在

li

中嵌套

ul

，嵌套列表将显示在单个单元格中，并且永远不会占据整个表的宽度

解决方案是使用

tbody

作为我的组件的根元素。这意味着我可以尊重Vue的要求，即只有一个根元素，并在其中放入许多

tr

。从视觉上看，这与拥有多个

tr

是一样的列宽也会调整以适应整行的内容，即使

tr

元素不是直接的同级元素。而且它还具有作为有效HTML的优点

表格{
边界间距：10px；
}
tr{
背景色：#f0；
}
运输署{
填充物：5px；
}
.对{
左侧填充：60px；
文本对齐：右对齐；
}

单元格1.1
单元格1.2
嵌套单元格1
嵌套单元2
单元格2.1
单元格2.2

广告宽度：自动；使用CSS中的ul标记来修复问题1，如果提供一个JSFIDLETH，那么就更容易解决问题1。。。ul会自动增长，但其中的两列会根据内容以不同的速度增长。我希望他们以同步的方式成长。另外，我用一个JSFIDLE链接更新了这个问题，以防你想尝试一下。我不完全确定是否可以完全用CSS完成，但我认为你最好使用Flexbox属性。您可以使用

order

和

flex-direction

属性来“定位”单元格。非常好！但它只有在我事先知道表和嵌套表的结构时才起作用。这些例子是对实际结构的简化，其中包含更多的单元格和行，至少在理论上可以无限嵌套。啊，我明白了，我误解了你的要求，你没有办法修改这个的结构吗？看起来您的问题本质上来自于htmlWell中的数据结构，我可以，但我不想。我使用的是独立的Vue 2组件，它们的模板中只允许一个根HTML元素，这意味着每个项目只能生成一个

li

（可能包含也可能不包含嵌套项目），而不是正确格式化所需的两个。