响应表 - 如何对表的列进行分组以实现以下结果？

Question

我在桌面上工作，在移动设备上应该显示为下面的第二张图片，点击标题（橙色部分）应该折叠（显示和隐藏）白方。

如何对列进行分组？那是给我带来困难的部分。到目前为止，我尝试了一些但没有成功。我尝试在divs，<table>和<tbody>中使用<tr>，但我了解到这是不可接受的，实际上div已经从DOM上的表中溢出。我尝试使用<colgroup>和<col>，但是一旦我将显示更改为<table>或<tr>到内联显示或flex，那些就会停止运行。

我能够使用salesforce光环来实现这一目标，但无法用纯html和css来解决这个问题。

您可以通过http://codepen.io/vinicius5581/pen/XXKGwx

直播我的工作

这是我失败的尝试之一。请注意，一旦我对<tr>应用了flex，我就会完全失去<colgroup>。

＆＃13;

＆＃13;

*{border:0;margin:0;padding:0;}
thead{
  display:none;
}
.mob-header{
  background:red;
}
tr{
  display: flex;
  flex-wrap: wrap;
}
td{
  width: 100%; 
}

td:nth-of-type(1){
  width: 50%;
  order: 1;
}
td:nth-of-type(2){
  width: 50%;
  order: 2;
}
td:nth-of-type(3){
  width: 50%;
  order: 3;
}
td:nth-of-type(4){
  width: 100%;
  order: 5;
  float:right;
}
td:nth-of-type(5){
  width: 50%;
  order: 4;
}

td:nth-of-type(4)::before{
  content:'Header 4';
  display:inline-block;
  width: 50%;
}

＆＃13;

<table>
  <colgroup class="mob-header" span="3"></colgroup>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>CEL 1A</td>
      <td>CEL 2A</td>
      <td>CEL 3A</td>
      <td>CEL 4A</td>
      <td>CEL 5A</td>
    </tr>
    <tr>
      <td>CEL 1B</td>
      <td>CEL 2B</td>
      <td>CEL 3B</td>
      <td>CEL 4B</td>
      <td>CEL 5B</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

欢迎任何帮助。 TNX。 ;）