Eduardo Castillo Eduardo Castillo - 2 months ago 7
AngularJS Question

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

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

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