enter image description here

I recently got a datatable working on my wordpress site, and with help from other users I finally got the table fixed so that it sidescrolls while the datatable options (search, page number, number of results/entries) still stay fixed. However, I’m having an issue with the table header almost looking like it’s separate from the body and the columns start to get out of alignment with the row columns. Here’s a picture of the issue:

There’s a bold line with a blank separator between the header and row columns and you can see around the date column they are way out of alignment from there. I’m not sure if the issue is in the html code or more the js code. Here is the actual code:

<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;">
<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>

Is there a glaring issue here that would cause the display/formatting to do this?

Read more here: Datatable header columns out of alignment with row columns


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: