how to disable bootstrap DataTables horizontal scroll

I have this horizontal bar that is completely unfunctional, and it is looking very bad:

I was wondering if I could delete it but only using the js in "_MyLayout" file:

$('.table').DataTable({
    pageLength: 50,
    pagingType: "full_numbers",
    scrollY: '300px',
    scrollCollapse: true
});

Also, if it is necessary to use the "site.css" file I have an issue with using it, as I do any changes and it does not work. I made sure that the site.css is loaded after style.min.css:

<link href="~/css/style.min.css" rel="stylesheet">
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />

But whenever I try adding anything to this file, nothing is responsive apart from this font size inside of the "@media" bracket:

html {
    font-size: 14px;
}

**@media** (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
}

You need to sign in to view this answers