How to display a table that changes number of columns based on if mobile

Question

I have a table like this for example

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

And on mobile I just want to display the important columns like:

| 1 | 2 | 3 | 4 |

I've tried looking at responsive design but all it does is re-order the whole table rather than just showing part of the table.

I'm currently using ionic which uses angular and I haven't seen anyone do an example like this on stackoverflow.

Answer 1

You use media queries with a max-width value and then hide table cells with a class of 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

You can hide all columns after the fourth with CSS :nth-child like this:

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>

---

The example is made with a class name just to see it working on the snippet, on your actual issue you can use a the code inside your media query to hide the columns like:

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