JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>

    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.1.0/css/rowGroup.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.dataTables.min.css">

    <style>
tr.odd td:first-child,
tr.even td:first-child {
    padding-left: 4em;
}
    table, th, td {
    border: 1px   black;
    text-align: center;
    font: smaller;
    }

    td {
    white-space: nowrap;
    }

   
    td.wrapok {
    white-space: normal
    }
    </style>

</head>

<body>
    <div style="margin: 0 auto; width:855px;">
        <table id="attendance" class="table table-bordered table-striped text-center dataTable no-footer" role="grid" aria-describedby="attendance_info" style="width: 0px;"><thead class="row my-sticky-header">
                                <tr role="row"><td rowspan="2" class="checker sorting_disabled" colspan="1" style="width: 0px;">SNo</td><td rowspan="2" class="checker sorting_disabled" colspan="1" style="width: 0px;">Employee</td><td rowspan="2" class="checker sorting_disabled" colspan="1" style="width: 0px;">In Time</td><td rowspan="2" class="checker sorting_disabled" colspan="1" style="width: 0px;">Out Time </td><td rowspan="2" class="checker sorting_disabled" colspan="1" style="width: 0px;">Break Hrs</td><td rowspan="2" class="checker sorting_disabled" colspan="1" style="width: 0px;">Net Hrs</td><td rowspan="2" class="checker sorting_disabled" colspan="1" style="width: 0px;">In Time</td><td rowspan="2" class="checker sorting_disabled" colspan="1" style="width: 0px;">Out Time </td><td colspan="2" rowspan="1">Normal Attendance </td><td colspan="2" rowspan="1">
                                        Scheduled DayOff
                                    </td><td colspan="2"...

JavaScript

$(document).ready(function () {
        $("#AttendanceDatePicker").datepicker({ format: 'dd/mm/yyyy', todayHighlight: true, date: new Date(), autoclose: true, todayBtn: 'linked' });
        ShowResultModalPopup('@ViewBag.Result');
        $(".checker").removeClass('sorting');
        KeyHandler();

        var table = $('#attendance').dataTable({
            "bPaginate": false,
            "ordering": false,
            fixedHeader: true
        });
        AttendCheck();
        $('#attendance').on('page.dt', function () {
           // var info = table.page.info();
           // invokeEditable();
            AttendCheck();
        });

        });
        function FillAttendanceLog()
        {
            var href = '/Employee/EmployeeAttendance?DN=' + $("#dropdownDepot option:selected").val() + '&DPT=' + $("#dropdownDepartment option:selected").val() + '&AD=' + $("#txtAttendanceDate").val();
            $("#lnkFilter").attr('href', href);
            $("#lnkFilter").click();
        }
    function ShowHolidayCalendar() {
        $('#calendar').fullCalendar('changeView', 'agendaWeek');
        $('#calendar').fullCalendar('changeView', 'month');

        $('span.fc-button.fc-button-today').click();
        $("#DepotCalendarModal").modal('show');
    }