Geek Answers Handbook

How to display a table that changes the 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 the mobile device, I just want to display important columns, for example:

| 1 | 2 | 3 | 4 |

I tried looking at a responsive design, but all it does is reorder the whole table, not just display part of the table.

I am currently using ionic, which uses angular, and I have not seen anyone do such an example in stackoverflow.

+6
source share
2 answers

You use media queries with the maximum value, and then hide the table cells with the hide-mobile class;

.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

+4
source

You can hide all columns after the fourth using CSS :nth-child as follows:

 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>

An example is done with the class name to see how it works with the fragment, in your real problem you can use the code inside your media query to hide the columns, for example:

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

More articles:


All Articles