Scrollx搞砸了数据表中的列对齐

Question

我最近在我的wordpress网站上运行了一个数据表，并且在其他用户的帮助下，我终于修复了表格，以便在数据表选项（搜索，页码，结果/条目数）仍然保持固定的情况下进行侧边滚动。但是，我遇到了表头问题，几乎看起来它与主体分开，并且列开始与行列不对齐。这是问题的图片：

在标题行和行列之间有一个空白分隔符的粗线，您可以在日期列中看到它们与那里不对齐。我不确定问题是在html代码中还是在js代码中。这是实际的代码：

<div class="dashboardTable" style="width:965px;">
<div class="table-responsive">
<table id="mytable" style="border: 1px solid #468BBD; border-collapse: collapse; width:100%; margin:0 auto; table-layout:fixed;">
<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>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">WaterValveArriv</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'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderNum'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['date'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['utility'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['serviceName'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['address'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><?php echo '<a href="/dashboard-display?id='.$row['serialNumber'].'">'.$row['serialNumber'].'</a>'; ?>   </td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['lowSideMIUNumArriv'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['lowSideMIUNumDepart'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['highSideMIUNumArriv'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['highSideMIUNumDepart'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['locationNotes'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['locationComments'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['WaterValveArriv'];?>&nbsp;</td>

</tr>
<?}?>
</tbody>
</table>
</div>
</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({ "scrollX": true });

 });
}(jQuery));
</script>

表格布局：固定在表格样式中将对齐列，但搜索和页码数据表选项不再固定。我需要它来签名，但这些选项也可以在侧滚动时修复。