如何使用 table 行显示对多个元素进行分组而不弄乱 table？

Question

我正在使用表格布局显示一些非表格信息，试图在没有 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%;
}

但是，以上内容并未按预期工作。我尝试将内容 <div> 更改为 class 名称的不同组合，但在这两种情况下，嵌套行都不会跨越外部 table 的整个宽度，仅在第一列内。

如果我使用的是实际的 tables，可以使用多个 <tbody> 来实现手风琴来解决上述问题。但是，最佳实践建议像我这样的上下文不要使用 tables，对此我无法在线找到任何相关解决方案。我的问题的等效解决方案是什么？

Answer 1

使用display: table-row-group可以解决您的问题。

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

示例如下。干杯！

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

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

.cell {
  display: table-cell;
  border: 1px solid red;
}

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

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

如何使用 table 行显示对多个元素进行分组而不弄乱 table？

How do I group multiple elements with table-row display without messing up the table?

html

css

css-tables