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>更改为不同的类名组合，但嵌套行在两种情况下都不跨越外表的整个宽度，仅在第一列内。

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

Answer 1

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

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

以下示例。干杯！

＆＃13;

.table {
  display: table;
  width: 100%;
}

.row {
  display: table-row;
  width: 100%;
}

.cell {
  display: table-cell;
  border: 1px solid red;
}

.content {
  display: table-row-group;
}

＆＃13;

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

＆＃13;

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

1 个答案: