Asked by:
Column Header not aligned with column data in my Data table
Question
-
User-1355965324 posted
Hi
Please can you help to fix my code with your suggested code to align the header with column data. Currently the column header and data header position is not in the alignment. I think I have to set column width and data width should be same . Please can you help it would be very appreciated
https://drive.google.com/open?id=1qVLaaF-7XqVGHT40TeCD-WItCWsWjBrs
Here is my code
<head> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" type="text/css"> </head> <table id="attendance" class="table table-bordered table-striped text-center" style="width:100%"> <thead class="thead-light"> <tr> <td rowspan="2" class="checker">SNo</td> <td rowspan="2" class="checker">Employee</td> <td rowspan="2" class="checker">In Time</td> <td rowspan="2" class="checker">Out Time </td> <td rowspan="2" class="checker">Break Hrs</td> <td rowspan="2" class="checker">Net Hrs</td> <td rowspan="2" class="checker">Clock In</td> <td rowspan="2" class="checker">Clock Out</td> <td colspan="2">Normal Attendance </td> <td colspan="2"> Scheduled DayOff </td> <td colspan="2" class="hidden">DayOff Re.funeral</td> <td colspan="2">Sick</td> <td colspan="2">Holiday</td> <td colspan="2">Maternity Paternity</td> <td colspan="2">Time off</td> <td rowspan="2" class="checker">Sal Ded</td> <td rowspan="2" class="checker">Extra Time</td> <td rowspan="2" class="checker">Comment</td> </tr> <tr> <td class="checker"></td> <td class="checker">Time</td> <td class="checker"></td> <td class="checker">Time</td> <td class="checker hidden"></td> <td class="checker hidden">Time</td> <td class="checker"></td> <td class="checker">Time</td> <td class="checker"></td> <td class="checker">Time</td> <td class="checker"></td> <td class="checker">Time</td> <td class="checker"></td> <td class="checker">Time</td> </tr> </thead> <tbody> @{ if (Model.attendanceLogList != null) { int i = 0; int slNo = 0; for (i = 0; i < Model.attendanceLogList.Count; i++) { slNo++; if ((@Model.attendanceLogList[i].IsFlexibleDayOff == false && @Model.attendanceLogList[i].IsDayOffMarked) || @Model.attendanceLogList[i].IsProtected) <tr id="@i" class="hidden"> <td>@slNo<input asp-for="@Model.attendanceLogList[i].LogID" type="hidden" /></td> <td>@Model.attendanceLogList[i].EmployeeName<input asp-for="@Model.attendanceLogList[i].EmployeeID" type="hidden" /></td> <td>@Model.attendanceLogList[i].InTime<input asp-for="@Model.attendanceLogList[i].DepotNo" type="hidden" /></td> <td>@Model.attendanceLogList[i].OutTime<input asp-for="@Model.attendanceLogList[i].DepartmentID" type="hidden" /></td> <td>@Model.attendanceLogList[i].BreakTime</td> <td><input asp-for="@Model.attendanceLogList[i].NetHrs" type="text" class="borderless-text" /></td> <td>@Model.attendanceLogList[i].ClockedIn<input asp-for="@Model.attendanceLogList[i].ClockedIn" type="hidden" /></td> <td>@Model.attendanceLogList[i].ClockedOut<input asp-for="@Model.attendanceLogList[i].ClockedOut" type="hidden" /></td> <td><input type="checkbox" value="true" asp-for="@Model.attendanceLogList[i].IsNormalAttendance" data-tag="NormalHrs" /> <input type="hidden" value="false" asp-for="@Model.attendanceLogList[i].IsNormalAttendance" /> </td> <td><a href="#" data-pk="NormalHrs">@Model.attendanceLogList[i].NormalHrs</a><input asp-for="@Model.attendanceLogList[i].NormalHrs" type="hidden" class="bros" /></td> <td><input type="checkbox" value="true" asp-for="@Model.attendanceLogList[i].IsDayOffMarked" data-tag="DayOffHrs" /> <input type="hidden" value="false" asp-for="@Model.attendanceLogList[i].IsDayOffMarked" /> </td> <td><a href="#" data-pk="DayOffHrs">@Model.attendanceLogList[i].DayOffHrs</a><input asp-for="@Model.attendanceLogList[i].DayOffHrs" type="hidden" class="bros" /></td> <td class="hidden"><input type="checkbox" value="true" asp-for="@Model.attendanceLogList[i].IsFuneralDayOff" data-tag="FuneralHrs" /><input type="hidden" value="false" asp-for="@Model.attendanceLogList[i].IsFuneralDayOff" /> </td> <td class="hidden"><a href="#" data-pk="FuneralHrs">@Model.attendanceLogList[i].FuneralHrs</a><input asp-for="@Model.attendanceLogList[i].FuneralHrs" type="hidden" class="bros" /></td> <td><input type="checkbox" value="true" asp-for="@Model.attendanceLogList[i].IsSickMarked" data-tag="SickHrs" /> <input type="hidden" value="false" asp-for="@Model.attendanceLogList[i].IsSickMarked" /></td> <td><a href="#" data-pk="SickHrs">@Model.attendanceLogList[i].SickHrs</a><input asp-for="@Model.attendanceLogList[i].SickHrs" type="hidden" class="bros" /></td> <td><input type="checkbox" value="true" asp-for="@Model.attendanceLogList[i].IsHolidayMarked" data-tag="HolidayHrs" /><input type="hidden" value="false" asp-for="@Model.attendanceLogList[i].IsHolidayMarked" /> </td> <td><a href="#" data-pk="HolidayHrs">@Model.attendanceLogList[i].HolidayHrs</a><input asp-for="@Model.attendanceLogList[i].HolidayHrs" type="hidden" class="bros" /></td> <td><input type="checkbox" value="true" asp-for="@Model.attendanceLogList[i].IsMaternityLeave" data-tag="MaternityHrs" /><input type="hidden" value="false" asp-for="@Model.attendanceLogList[i].IsMaternityLeave" /> </td> <td><a href="#" data-pk="MaternityHrs">@Model.attendanceLogList[i].MaternityHrs</a><input asp-for="@Model.attendanceLogList[i].MaternityHrs" type="hidden" class="bros" /></td> <td><input type="checkbox" value="true" asp-for="@Model.attendanceLogList[i].IsTimeOff" data-tag="TimeOffHrs" /><input type="hidden" value="false" asp-for="@Model.attendanceLogList[i].IsTimeOff" /> </td> <td><a href="#" data-pk="TimeOffHrs">@Model.attendanceLogList[i].TimeOffHrs</a><input asp-for="@Model.attendanceLogList[i].TimeOffHrs" type="hidden" class="bros" /></td> <td><input type="checkbox" value="true" asp-for="@Model.attendanceLogList[i].IsDeductionMarked" /><input type="hidden" value="false" asp-for="@Model.attendanceLogList[i].IsDeductionMarked" /> </td> <td><a href="#" data-pk="ExtraTimeHrs">@Model.attendanceLogList[i].ExtraTimeHrs</a><input asp-for="@Model.attendanceLogList[i].ExtraTimeHrs" type="hidden" class="bros" /></td> <td class="text"><a href="#" data-pk="Remark">@Model.attendanceLogList[i].Remark</a><input asp-for="@Model.attendanceLogList[i].Remark" type="hidden" /></td> </tr> <tr> <td>@slNo</td> <td>@Model.attendanceLogList[i].EmployeeName</td> <td>@Model.attendanceLogList[i].InTime</td> <td>@Model.attendanceLogList[i].OutTime</td> <td>@Model.attendanceLogList[i].BreakTime</td> <td>@Model.attendanceLogList[i].NetHrs</td> <td>@Model.attendanceLogList[i].ClockedIn</td> <td>@Model.attendanceLogList[i].ClockedOut</td> @{ if (@Model.attendanceLogList[i].IsNormalAttendance) { <td><img src="~/img/tick.png" style=" cursor:not-allowed;" data-tag="NormalHrs" /> </td> } else { <td><img src="~/img/check.png" style=" cursor:not-allowed;" data-tag="NormalHrs" /> </td> } <td><div class="disabled">@Model.attendanceLogList[i].NormalHrs</div></td> if (@Model.attendanceLogList[i].IsDayOffMarked) { <td><img src="~/img/tick.png" style=" cursor:not-allowed;" data-tag="DayOffHrs" /> </td> } else { <td><img src="~/img/check.png" style=" cursor:not-allowed;" data-tag="DayOffHrs" /> </td> } <td><div class="disabled">@Model.attendanceLogList[i].DayOffHrs</div></td> if (@Model.attendanceLogList[i].IsFuneralDayOff) { <td class="hidden"><img src="~/img/tick.png" style=" cursor:not-allowed;" data-tag="FuneralHrs" /> </td> } else { <td class="hidden"><img src="~/img/check.png" style=" cursor:not-allowed;" data-tag="FuneralHrs" /> </td> } <td class="hidden"><div class="disabled">@Model.attendanceLogList[i].FuneralHrs</div></td> if (@Model.attendanceLogList[i].IsSickMarked) { <td><img src="~/img/tick.png" style=" cursor:not-allowed;" data-tag="SickHrs" /> </td> } else { <td><img src="~/img/check.png" style=" cursor:not-allowed;" data-tag="SickHrs" /> </td> } <td><div class="disabled">@Model.attendanceLogList[i].SickHrs</div></td> if (@Model.attendanceLogList[i].IsHolidayMarked) { <td><img src="~/img/tick.png" style=" cursor:not-allowed;" data-tag="HolidayHrs" /> </td> } else { <td><img src="~/img/check.png" style=" cursor:not-allowed;" data-tag="HolidayHrs" /> </td> } <td><div class="disabled">@Model.attendanceLogList[i].HolidayHrs</div></td> if (@Model.attendanceLogList[i].IsMaternityLeave) { <td><img src="~/img/tick.png" style=" cursor:not-allowed;" data-tag="MaternityHrs" /> </td> } else { <td><img src="~/img/check.png" style=" cursor:not-allowed;" data-tag="MaternityHrs" /> </td> } <td><div class="disabled">@Model.attendanceLogList[i].MaternityHrs</div></td> if (@Model.attendanceLogList[i].IsTimeOff) { <td><img src="~/img/tick.png" style=" cursor:not-allowed;" data-tag="TimeOffHrs" /> </td> } else { <td><img src="~/img/check.png" style=" cursor:not-allowed;" data-tag="TimeOffHrs" /> </td> } <td><div class="disabled">@Model.attendanceLogList[i].TimeOffHrs</div></td> } <td><input type="checkbox" value="true" disabled /> </td> <td><div class="disabled">@Model.attendanceLogList[i].ExtraTimeHrs</div></td> <td>@Model.attendanceLogList[i].Remark</td> </tr> } } } </tbody> </table> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/rowgroup/1.1.0/js/dataTables.rowGroup.min.js"></script> $(document).ready(function () { ShowResultModalPopup('@ViewBag.Result'); $(".checker").removeClass('sorting'); KeyHandler(); var table = $('#attendance').dataTable({ "bPaginate": false, "ordering": false, scrollY: "600px", scrollX: true, scrollCollapse: true, "columnDefs": [ { "width": "20%", "targets": 1 }, { "width": "20%", "targets": 24 }, { "width": "5%", "targets": 6 }, { "width": "5%", "targets": 7 } ] //fixedHeader:true });Thursday, April 4, 2019 9:42 AM
All replies
-
User1724605321 posted
Hi polachan ,
With your current provided codes, i can't reproduce your issue :
You should provide more details , for example , what is the propose of :
$(".checker").removeClass('sorting');Also provide related css code , i would suggest you use F12 develop tools to trace the css of your table to find out which factor affects that .
Best Regards,
Nan Yu
Friday, April 5, 2019 2:50 AM
