Cómo esconder Columnas Automáticamente mediante CSS en una tabla responsiva

Clase Priority

El siguiente código HTML lo utilizaremos para mostrar tablas responsive y en ellas aplicaremos las clases mencionadas antes. En esa clase definiremos la prioridad para gestionar si queremos mostrarlas en dispositivos más pequeños o no. Es decir, cuando la pantalla se haga más y más pequeña, las columnas se ocultarán gracias al código de las clases prioritys.

<table id="contact-detail" class="tutorial-table" cellspacing="0" width="100%">
        <thead>
                <tr>
                        <th class="priority-1" width="15%">First Name</th>
                        <th class="priority-2" width="15%">Last Name</th>
                        <th class="priority-3" width="15%">Address</th>
                        <th class="priority-4" width="10%">Phone</th>
                        <th class="priority-5" width="15%">DOB</th>
                </tr>
        </thead>
        
        <tbody>
                <tr>
                        <td class="priority-1">Barry</td>
                        <td class="priority-2">Allen</td>
                        <td class="priority-3">Florida</td>
                        <td class="priority-4">2211335566</td>
                        <td class="priority-5">02-02-1983</td>
                </tr>
                ...
                ...
                <tr>
                        <td class="priority-1">Tony</td>
                        <td class="priority-2">Stark</td>
                        <td class="priority-3">Texas</td>
                        <td class="priority-4">8899886655</td>
                        <td class="priority-5">05-10-1984</td>
                </tr>
        </tbody>
</table>

Media queries de CSS para ocultar columnas automáticamente

Utilizaremos el siguiente código CSS para implementar la ocultación de columnas automáticamente con ayuda de las media queries. Como podrás ver, las media queries hacen referencia a cuatro tamaños de pantalla distintos. Cuando el tamaño de la pantalla concuerde con alguno de las media queries, se aplicarán sus estilos a las columnas de la tabla.

@media screen and (max-width: 1225px) and (min-width: 1045px) {
                .priority-5{
                        display:none;
                }
        }
        
        @media screen and (max-width: 1045px) and (min-width: 835px) {
                .priority-5{
                        display:none;
                }
                .priority-4{
                        display:none;
                }
        }
        
        @media screen and (max-width: 565px) and (min-width: 300px) {
                .priority-5{
                        display:none;
                }
                .priority-4{
                        display:none;
                }
                .priority-3{
                        display:none;
                }
        }
        
        @media screen and (max-width: 300px) {
                .priority-5{
                        display:none;
                }
                .priority-4{
                        display:none;
                }
                .priority-3{
                        display:none;
                }
                .priority-2{
                        display:none;
                }
        
        }