Jquery Scrollx搞乱了datatable中的列对齐方式

我最近在我的wordpress网站上得到了一个datatable，在其他用户的帮助下，我最终修复了这个表，这样它可以侧滚，而datatable选项（搜索、页码、结果/条目数）仍然保持不变。但是，我遇到了一个问题，表头看起来几乎与正文分离，列开始与行列不对齐。以下是该问题的图片：

在标题和行列之间有一条粗体线，带有空白分隔符，您可以在日期列周围看到它们从那里偏离了方向。我不确定问题是在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>

服务执行
工作单编号
日期
效用
服务名称
地址
序列号。
罗西德米乌努马里夫酒店
lowSideMIUNumDepart
海塞德米乌努马里夫酒店
highSideMIUNumDepart
地点注释
位置注释
水阀
（函数（$）{
$（文档）.ready（函数（）{
$（'#mytable'）.DataTable（{“scrollX”：true}）；
});
}（jQuery））；

表样式中的“表布局：固定”将对齐列，但搜索和页码数据表选项不再固定。我需要它是aigned，但这些选项也被固定时，侧滚动