Question

我有一个这样的表格，例如

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

在移动设备上，我只想显示重要的列，如：

| 1 | 2 | 3 | 4 |

我已经尝试过查看自适应设计，但它所做的只是重新整理整个表格，而不仅仅是显示表格的一部分。

我目前正在使用使用angular的离子，我还没有看到有人在stackoverflow上做这样的例子。

Answer 1

您使用具有最大宽度值的媒体查询，然后使用hide-mobile类隐藏表格单元格;

.hide-mobile {
  background: silver;
}
@media (max-width: 600px) {
  .hide-mobile {
    display: none;
  }
}

div {
  margin-top: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid red;
  width: 600px;
}

<div>If window is smaller then the width of this red line than the cells with the gray background disappear</div>
<table>
  <tr>
    <td class="hide-mobile">Lorem ipsum dolor sit amet, consectetur.</td>
    <td>Lorem ipsum dolor.</td>
    <td>Corrupti, ipsum eligendi.</td>
    <td>Nobis, placeat, aut?</td>
    <td class="hide-mobile">Lorem ipsum dolor.</td>
    <td>Lorem ipsum dolor.</td>
  </tr>
  <tr>
    <td class="hide-mobile">Veniam, commodi omnis voluptatem rem! Consectetur?</td>
    <td>Lorem ipsum dolor.</td>
    <td>Sed, esse, quidem.</td>
    <td>Officiis repellat, cumque.</td>
    <td class="hide-mobile">Maxime, et, blanditiis.</td>
    <td>Tempore, molestias, totam.</td>
  </tr>
  <tr>
    <td class="hide-mobile">Reiciendis blanditiis voluptas tenetur possimus, quas.</td>
    <td>Lorem ipsum dolor.</td>
    <td>Eos, modi, illum!</td>
    <td>Distinctio, iusto rerum!</td>
    <td class="hide-mobile">Autem, ex, dolor.</td>
    <td>Quae, quod, quasi.</td>
  </tr>
  <tr>
    <td class="hide-mobile">Ratione doloremque distinctio porro, explicabo voluptatibus.</td>
    <td>Lorem ipsum dolor.</td>
    <td>Quod, doloribus, accusantium!</td>
    <td>Totam, voluptate, sapiente!</td>
    <td class="hide-mobile">Quasi maiores, qui.</td>
    <td>Dicta, labore, eum.</td>
  </tr>
  <tr>
    <td class="hide-mobile">Dolor harum eligendi, unde facere similique!</td>
    <td>Lorem ipsum dolor.</td>
    <td>Expedita, doloremque reprehenderit.</td>
    <td>Quasi, alias, nemo.</td>
    <td class="hide-mobile">Voluptatibus, quos, a!</td>
    <td>Debitis, hic corporis!</td>
  </tr>
  <tr>
    <td class="hide-mobile">Recusandae ipsa repudiandae quod quaerat ducimus.</td>
    <td>Lorem ipsum dolor.</td>
    <td>Delectus, impedit, error.</td>
    <td>Iste, illum, dicta.</td>
    <td class="hide-mobile">Voluptatibus, autem, itaque!</td>
    <td>Iure, error iusto.</td>
  </tr>
  <tr>
    <td class="hide-mobile">Explicabo ut qui deserunt laboriosam provident.</td>
    <td>Lorem ipsum dolor.</td>
    <td>Accusamus, neque, laborum.</td>
    <td>Distinctio repudiandae, eaque!</td>
    <td class="hide-mobile">Repellendus maiores, ipsa.</td>
    <td>Quasi, vero, tenetur!</td>
  </tr>
  <tr>
    <td class="hide-mobile">Temporibus sapiente iusto quasi. Cupiditate, reprehenderit.</td>
    <td>Lorem ipsum dolor.</td>
    <td>Vero, libero sapiente?</td>
    <td>Inventore, molestiae, ut!</td>
    <td class="hide-mobile">Ipsam, molestias, iusto.</td>
    <td>Nesciunt, ab recusandae.</td>
  </tr>
</table>

http://codepen.io/HerrSerker/pen/JREAgJ

Answer 2

您可以使用CSS :nth-child隐藏第四列之后的所有列，如下所示：

＆＃13;

td {
  padding:1em;
  background:red;
}
.mobile td:nth-child(1n+5)  {
  display:none
}

＆＃13;

<table><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></table>

<table class="mobile"><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></table>

＆＃13;

该示例是使用类名进行的，只是为了看到它在片段上工作，根据您的实际问题，您可以使用媒体查询中的代码来隐藏列，如：

@media (max-width:560px) {
  table td:nth-child(1n+5)  {
    display:none
  }
}

如何根据移动设备显示更改列数的表

2 个答案: