M assets/js/app.js → assets/js/app.js

@@ -21,6 +21,7 @@ { data: 'Join Diff' },
             { data: 'Updated' },
         ],
         paging: false,
+        responsive: true,
         order: [[ 0, "asc" ]]
     };
     const table = $('#table').DataTable(options);

M index.html → index.html

@@ -7,12 +7,12 @@ <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
     <link rel="stylesheet" type="text/css" href="assets/css/custom.css">
 
     <!-- Datatables -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.20/fh-3.1.6/r-2.2.3/sl-1.3.1/datatables.min.css"/>
     <link rel="stylesheet" type="text/css" href="assets/css/table.css">
 
     <!-- jQuery & Datatables -->
     <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
-    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
+    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.20/fh-3.1.6/r-2.2.3/sl-1.3.1/datatables.min.js"></script>
     <script type="text/javascript" charset="UTF-8" src="assets/js/app.js"></script>
 
     <!-- #FONT-AWESOME -->
@@ -36,7 +36,7 @@ </div>
                 <h1>
                     <i class="fas fa-skull-crossbones text-danger"></i> Private Tracker List
                 </h1>
-                <table id="table" class="dataTable table-striped compact hover">
+                <table id="table" class="dataTable table-striped compact hover" style="width: 100% !important;">
                     <thead>
                     <tr>
                         <th>Name</th>