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

i displaying non-tabular information using tabular layout, attempting create accordion functionality without jquery. attempting should similar following:

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

the above doesn't work intended, however. tried changing content <div> different combinations of class names nested rows not span across entire width of outer table in both cases, within first column.

if using actual tables, above can resolved using multiple <tbody> implement accordion. however, best practices recommend contexts such mine not use tables, unable find relevant solution online. equivalent solution problem?

use display: table-row-group solves problem.

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

example below. cheers!

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