/* Make DataTables slideable (horizontally scrollable) */
@media screen and (max-width: 1024px) {
    /* Target the wrappers that DataTables creates around the table */
    .dataTables_wrapper > div:not(.row),
    .dataTables_wrapper > .row > [class*="col-"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100%;
    }
    
    /* Keep the table behaving like a real table to fix column width and whitespace issues */
    table.dataTable {
        display: table !important;
        width: 100% !important;
        white-space: nowrap !important;
    }
    
    table.dataTable thead th,
    table.dataTable tbody td {
        white-space: nowrap !important;
    }
}