Question

我试图通过使用div：s thats 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和使用此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-cell的div，它不是display：table-row的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/

创建一个响应表，将标题隐藏在较小的媒体尺寸中

1 个答案: