Tabla con columnas con prioridad de ocultación

Vamos a crear una tabla responsive con la característica ocultar sus columnas automáticamente utilizando únicamente HTML y CSS.

Para lograr esto utilizaremos clases CSS para definir la prioridad de la columna de forma que: priority-1 y priority-2... Estas columnas se visualizarán basándose en el tamaño de la pantalla. 

Utilizaremos Media-queries para que a diferentes tamaños de pantalla estén habilitados diferentes prioridades.

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="libros-detail" class="tutorial-table" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th class="priority-1" width="15%">Titulo</th>
            <th class="priority-2" width="15%">Autor</th>
            <th class="priority-3" width="15%">Orden</th>
            <th class="priority-4" width="10%">ISBN</th>
            <th class="priority-5" width="15%">Datos</th>
        </tr>
    </thead>
        
    <tbody>
        <tr>
            <td class="priority-1">El ojo del mundo</td>
            <td class="priority-2">Rigney</td>
            <td class="priority-3">1</td>
            <td class="priority-4">2211335566</td>
            <td class="priority-5">Cosas</td>
        </tr>
        ...
        ...
        <tr>
            <td class="priority-1">Un mago de Terramar</td>
            <td class="priority-2">Le Guin</td>
            <td class="priority-3">1</td>
            <td class="priority-4">9788435004084</td>
            <td class="priority-5">Mas cosas</td>
        </tr>
    </tbody>
</table>

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

Con esto, a medida que se achica el tamaño de la pantalla van a ir desapareciendo las columnas por orden de prioridad.