Html 如何使用表格行显示对多个元素进行分组，而不会弄乱表格？

我正在使用表格布局显示一些非表格信息，试图创建一个没有jquery的手风琴功能。我尝试执行的操作应类似于以下内容：

// HTML
<div class="table">
  <div class="row header">
    <span class="cell">ABCDEFGHIJ</span>
    <span class="cell">1234567890</span>
  </div>
  <div class="content">
    <div class="row">
      <span class="cell">ABCDEFGHIJ</span>
      <span class="cell">1234567890</span>
    </div>
    <div class="row">
      <span class="cell">ABCDEFGHIJ</span>
      <span class="cell">1234567890</span>
    </div>
  </div>
</div>

/* CSS */
.table {
  display: table;
  width: 100%;
}

.row {
  display: table-row;
  width: 100%;
}

.cell {
  display: table-cell;
}

.content {
  width: 100%;
}

//HTML
ABCDEFGHIJ
1234567890
ABCDEFGHIJ
1234567890
ABCDEFGHIJ
1234567890
/*CSS*/
.桌子{
显示：表格；
宽度：100%；
}
.行{
显示：表格行；
宽度：100%；
}
.细胞{
显示：表格单元格；
}
.内容{
宽度：100%；
}

然而，上述方法并没有达到预期效果。我尝试将内容

更改为不同的类名组合，但在这两种情况下，嵌套行不会跨越外部表的整个宽度，仅在第一列中

---

如果我使用的是实际的表，那么可以使用多个

来实现accordio来解决上述问题。然而，最佳实践会建议像我这样的上下文不要使用表，因为我无法在网上找到任何相关的解决方案。我的问题的等效解决方案是什么？

使用

display:table row group

解决您的问题

.content {
  display: table-row-group;
}

下面的例子。干杯

.table{
显示：表格；
宽度：100%；
}
.行{
显示：表格行；
宽度：100%；
}
.细胞{
显示：表格单元格；
边框：1px纯红；
}
.内容{
显示：表格行组；
}

ABCDEFGHIJ
1234567890
ABCDEFGHIJ
1234567890
ABCDEFGHIJ
1234567890

标签的显示为

表格行组