テーブルを台無しにすることなく、テーブル行表示で複数の要素をグループ化するにはどうすればよいですか？

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

以下の例。乾杯！

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