创建响应式表格，以窄媒体大小隐藏标题

Question

我正在尝试使用div:s display: 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和bootstrap来做这件事，使用这个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;
  }
}

窄网页的输出是正常的

​

​

(虽然我还没有隐藏第一个标题)，但对于宽网页，它看起来像：

​

​

单元格不会显示在相应的标题下。

问题似乎是，我不能拥有不是display: table-row div直接子级的display: table-cell的div。有这样的限制吗?或者我可以绕过它吗？

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

https://jsfiddle.net/AndersBillLinden/q9h2dzxv/17/上的小提琴