如何显示根据是否移动而更改列数的表

Question

我有一个这样的表，例如

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

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

|1|2|3|4|

我尝试过响应式设计，但它所做的只是重新排列整张桌子，而不仅仅是显示桌子的一部分。

我目前使用的是ionic，它使用角度，我还没有见过有人在stackoverflow上做这样的例子。

Answer 1

使用具有最大宽度值的媒体查询，然后使用隐藏移动类隐藏表单元格；

.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可以隐藏第四列之后的所有列，如下所示：

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

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

---

这个例子使用了一个类名，只是为了查看它在代码片段中的工作情况，对于实际问题，您可以在媒体查询中使用代码来隐藏列，如：

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