时间戳

首页 > 解决方案 > 创建响应式表格，以窄媒体尺寸隐藏标题

angularjs - 创建响应式表格，以窄媒体尺寸隐藏标题

问题描述

我正在尝试使用 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 和 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-cell 的 div 不是 display: table-row 的 div 的直接子级。有这样的限制还是我可以解决它？

小提琴在https://jsfiddle.net/AndersBillLinden/q9h2dzxv/

标签： angularjstwitter-bootstrap

解决方案

我设法使用另一个显示值解决了这个问题：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/上摆弄

推荐阅读