Database table and table content not wrapping properly - php

Question

I have a working datatable on my site, but the initial problem was that there were so many columns and side scrolling would take away the datatable's search function, page numbers and number of entries option. I added the wrap code to my datatable JS code, seen below:
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('#mytable').DataTable();
$("#mytable").wrap("<div style='overflow-x: auto' />");
});
}(jQuery));
</script>
Which makes the datatable options fixed and only sidescrolls the table content (this is what I want) but it looks like this:
So, the function works properly now but I'd like to find a way to get the table to be the full width and have the datatable options sit on top and below like it was before, rather than the table being sandwiched between the datatable options.
Here's the full table code:
<div class="dashboardTable" style="width:920px;">
<table id="mytable" style="border: 1px solid #468BBD; border-collapse: collapse; width:100%; margin:0 auto;">
<thead>
<tr style="border: 1px solid #468BBD;">
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Preformed</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Work Order Number</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Date</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Utility</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Name</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Address</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Serial No.</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">lowSideMIUNumArriv</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">lowSideMIUNumDepart</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">highSideMIUNumArriv</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">highSideMIUNumDepart</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">locationNotes</th>
<th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">locationComments</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_array($result1)){
?>
<tr>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderType2'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderNum'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['date'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['utility'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['serviceName'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['address'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><?php echo ''.$row['serialNumber'].''; ?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['lowSideMIUNumArriv'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['lowSideMIUNumDepart'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['highSideMIUNumArriv'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['highSideMIUNumDepart'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['locationNotes'];?> </td>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['locationComments'];?> </td>
</tr>
<?
}
?>
</tbody>
</table>
</div>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$('#mytable').DataTable();
$("#mytable").wrap("<div style='overflow-x: auto' />");
});
}(jQuery));
</script>

Answer 1

Put your table in <div class="table-responsive"> </div> Section