How to fix alignment in jquery datatable between thead and tbody

Question

I make table with CRUD Operations in ASP.NET MVC5 and the table used Jquery datatable with , but when view in browser there is a problem in alignment between thead and body of the table, when i click on the thead fixed, and when i change layout from null to layout page it fixed also. [ here is my code

$('.table tfoot th').each(function () {
    var title = $(this).text();
    $(this).html('<input type="text" placeholder=' + title + '/>');
});//function each
function activatejQueryTable() {
    $(".table").DataTable({
        dom: "Bfrtip",
        buttons: [
            {
                extend: 'colvis',
                text: "Columns Visible"
            },
            {
                extend: 'collection',
                text: 'Export',
                buttons: [
                    'copy',
                    'excel',
                    'csv',
                    'pdf',
                    'print'
                ]
            }
        ],// buttons array
        columnDefs: [{
            targets: 0,
            visible: true
        }
        ],// columnDefs array
        "pageLength": 10,
        "fixedColumns": true,
        "scrollY": "300px",
        "scrollX": true,
        "scrollCollapse": true,
        "paging": true,
        "searching": true,
        "language": {
            "decimal": ",",
            "thousands": ".",
            //"url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Arabic.json",
        },//language
           initComplete: function () {
            // Apply the search
            this.api().columns().every(function () {
                var that = this;
                var searchTextBoxes = $(this.footer()).find('input');


                searchTextBoxes.on('keyup change clear', function () {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });//searchTextBoxes function
                searchTextBoxes.on('click', function (e) {
                    e.stopPropagation();
                }); //searchTextBoxes event
            });//this.api function
        }//initComplete function
    });//DataTable function
}//activatejQueryTable function

@model IEnumerable<TFD_ADMIN_9.Models.Professions>


@{
    ViewBag.Title = "ViewAll";
    Layout = null;
}

<table class="table table-bordered table-hover">
    <thead>
        <tr class="text-center text-nowrap">
            <th></th>
            <th>
                @Html.DisplayNameFor(model => model.PF_ID_AL)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ProfessionAr)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.DepartmentAr)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CrewAr)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Direct_Indirect)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ProfessionEn)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.PositionFrançais)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.DepartmentEn)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Division)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.DivisionAr)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Sub_Department)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FixedSalary)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Type)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Direct_Indirect_OLD)
            </th>

        </tr>
    </thead>

        @foreach (var item in Model)
        {
        <tr class="text-center text-nowrap border-dark text-dark">
            <td class="text-nowrap">
                <a class="btn btn-primary btn-sm" onclick="Edit('@Url.Action("AddOrEdit", "Profession", new { id=@item.PF_ID_AL})')"><i class="fa fa-pencil fa-lg"></i></a>
                <a class="btn btn-danger btn-sm" onclick="Delete('@Url.Action("Delete", "Profession", new { id=@item.PF_ID_AL})')"><i class="fa fa-trash fa-lg"></i></a>
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PF_ID_AL)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ProfessionAr)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DepartmentAr)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CrewAr)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Direct_Indirect)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ProfessionEn)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PositionFrançais)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DepartmentEn)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Division)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DivisionAr)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Sub_Department)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.FixedSalary)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Type)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Direct_Indirect_OLD)
            </td>
        </tr>
        }

    <tfoot>
        <tr class="text-center text-nowrap">
            <th></th>
            <th>
                @Html.DisplayNameFor(model => model.PF_ID_AL)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ProfessionAr)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.DepartmentAr)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CrewAr)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Direct_Indirect)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ProfessionEn)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.PositionFrançais)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.DepartmentEn)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Division)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.DivisionAr)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Sub_Department)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FixedSalary)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Type)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Direct_Indirect_OLD)
            </th>

        </tr>
    </tfoot>
</table>

]1