Scrollx fixed my side scroll issue, but now header and data columns are out of alignment
Scrollx fixed my side scroll issue, but now header and data columns are out of alignment
Thenorman138
Posts: 2Questions: 2Answers: 0
I have a wordpress site using a datatable and by setting scrollx:auto; I was able to fix the issue of side scrolling while the datatable options would stay fixed (such as search, page numbers and number of entries). However, after doing this my header and data/body columns are way out of alignment. After about 4 columns, the data starts before the correct header. Here is the code for the table, including JS and CSS:
<style type="text/css">
table,td,th{
border:1px solid black;
}
table{
border-collapse: collapse;
width:100%;
}
td{
border-collapse: collapse;
/*border-right: none;
border-left: none;*/
}
th{
padding-left: 10px;
padding-right:10px;
}
td{
padding-left: 10px;
padding-right:10px;
}
input[type=submit]{
border: 1px solid grey;
color:black;
font-size:12px;
}
table.dataTable tbody th,
table.dataTable tbody td {
white-space: nowrap;
}
</style>
</head>
<body>
<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'];?> </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 '<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'];?> </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>
<td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['WaterValveArriv'];?> </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>
Adding table-layout:fixed seemed to fix alignment, but it broke the fixed elements when sidescrolling. ANy ideas what can help me get the datatable options to stay fixed during scrolling but align all columns properly?
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Hi Thenorman138, unsure about how the various styles you have in your table will effect this, and I usually use this when I have a table that is display none and changing to display block but this works to align my columns with my header in that situation.