Создайте адаптивную таблицу, скрывая заголовки в узких форматах

Question

Я пытаюсь создать адаптивную таблицу с помощью div: s, который отображает: table, table-row и table-cell. Разметка старого стиля, которую я пытаюсь эмулировать, выглядит так, если окно браузера

широкий

<table>
    <tr>
        <th>hdr 1</th>
        <th>hdr 2</th>
        <th>hdr 3</th>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

производства

-------------------
|hdr 1|hdr 2|hdr 3|
-------------------
|  4  |  5  |  6  |
-------------------
|  7  |  8  |  9  |
-------------------

узкая

<table>
  <tr>
    <td>
      4:<br>
      <table>
        <tr>
          <td>hdr 2</td>
          <td>5</td>
        </tr>
        <tr>
          <td>hdr 3</td>
          <td>6</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      7:<br>
      <table>
        <tr>
          <td>hdr 2</td>
          <td>8</td>
        </tr>
        <tr>
          <td>hdr 3</td>
          <td>9</td>
        </tr>
      </table>    
    </td>
  </tr>  
</table>

производства

4:
-------------
|hdr 2|  5  |
-------------
|hdr 3|  6  |
-------------

7:
-------------
|hdr 2|  8  |
-------------
|hdr 3|  9  |
-------------

Я пытаюсь сделать это с помощью angularjs и начальной загрузки, используя этот HTML

<div class="stretched-table-sm">
  <div class="hidden-xs">
    <div>hdr 1</div>
    <div>hdr 2</div>
    <div>hdr 3</div>
  </div>
  <div ng-repeat="row in rows">
    <div class="visible-xs">
       {{row.val1}}:<br>
    </div>
    <div class="table-below-sm">
       <div>
         <div class="row-caption">hdr1</div>
           {{row.val1}}
         </div>
       </div>
       <div>
         <div class="row-caption">hdr2</div>
           {{row.val2}}
         </div>
       </div>
       <div>
         <div class="row-caption">hdr3</div>
           {{row.val3}}
         </div>
       </div>
    </div>
  </div>
</div>

и CSS идет

.stretched-table-sm
{
  width: 100%;
}

@media(max-width: 767px)
{
  .table-below-sm
  {
    display: table;
  }

  .table-below-sm > div
  {
    display: table-row;
  }

  .table-below-sm > div > div
  {
    display: table-cell;
  }
}

@media(min-width:768px)
{
  .stretched-table-sm
  {
    display: table;
  }

  .stretched-table-sm > div,
  .stretched-table-sm > div > div.table-below-sm
  {
    display: table-row;
  }

  .stretched-table-sm > div > div,
  .stretched-table-sm > div > div.table-below-sm > div
  {
    display: table-cell;
  }

  .table-below-sm
  {
    display: block !important;
  }

  .table-below-sm .row-caption
  {
    display: none;
  }
}

Вывод для узкой веб-страницы в порядке

(хотя я еще не скрывал первый заголовок), но для широкой веб-страницы это выглядит так:

Ячейки не отображаются под соответствующими заголовками.

Кажется, проблема в том, что у меня не может быть div, у которого есть display: table-cell, который не является прямым потомком div, который является display: table-row. Есть ли такое ограничение или я могу обойти его?

скрипка на https://jsfiddle.net/AndersBillLinden/q9h2dzxv/

Answer 1

Мне удалось решить эту проблему, используя еще одно отображаемое значение: table-row-group.

Это будет эмулировать элемент <tbody>.

@media(min-width:768px)
{
  .stretched-table-sm
  {
    display: table;
  }

  .stretched-table-sm > div
  {
    display: table-row-group;
  }

  .stretched-table-sm > div > div.table-below-sm
  {
    display: table-row;
  }

  .stretched-table-sm > div > div,
  .stretched-table-sm > div > div.table-below-sm > div
  {
    display: table-cell;
  }

  .table-below-sm
  {
    display: table-row !important;
  }

  .row-caption
  {
    display: none;
  }
}

Fiddle на https://jsfiddle.net/AndersBillLinden/q9h2dzxv/17/