数据表过滤器搜索标题的宽度和高度不一样？

Question

我从事 asp.net MVC 视图工作。我面临搜索过滤器列标题高度和宽度不同的问题。

例如，请求标题上方没有列过滤器，数据表上标题的宽度和高度不同。

还有行管理器列搜索过滤器与行管理器标题的高度和宽度不同。

所以我关于设计输入类型文本搜索过滤器的问题

我尝试如下：

@model IEnumerable<HR.WorkforceRequisition.Models.ResignationRequester>

@{
    ViewBag.Title = "PayrollTeam";
    Layout = "~/Views/Shared/_LayoutResignation.cshtml";
    var color = "white";
}
<style>


    thead input {
        width: 100%;
        border: solid 1px;
    }

       tfoot input {
        width: 100%;
    }
</style>



    <table id="dtbl" class="table table-bordered table-hover table-striped" style="width:100%;padding-left:5px;
padding-right:7px;">
        <thead>
            <tr style="background-color: #f2f2f2;">

                <th style="border: 1px solid black;">
                    Request No
                </th>
                <th style="border: 1px solid black;">
                    Employee No
                </th>
                <th style="border: 1px solid black;">
                    Employee Name
                </th>
                <th style="border: 1px solid black;">
                    Request Date   
                </th>
               
            </tr>
        </thead>

        <tbody>
            @foreach (var item in Model)
            {
                <tr style="background-color: #f2f2f2;">

                    <td style="border: 1px solid black;">
                        @Html.DisplayFor(modelItem => item.RequestNo)
                    </td>
                    <td style="border: 1px solid black;">
                        @Html.DisplayFor(modelItem => item.EmpID)
                    </td>
                    <td style="border: 1px solid black;">
                        @Html.DisplayFor(modelItem => item.EmpName)
                    </td>
                    <td style="border: 1px solid black;">
                        @Html.DisplayFor(modelItem => item.ResignationSubmissionDate)
                    </td>
                    
            }
        </tbody>
        <tfoot>
            <tr>
                <th>Request No</th>
                <th>Employee No</th>
                <th>Employee Name</th>
                <th>Request Date</th>
           

            </tr>

        </tfoot>
    </table>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"
        language="javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>


<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>





<script>
    $(document).ready(function () {
        $("#datepicker").datepicker();
        new DataTable('#dtbl', {
            "dom": 'rtip',
            "order": [[0, 'desc']],
            initComplete: function () {
                $('#dtbl tfoot tr').insertBefore($('#dtbl thead tr'))
                this.api()
                    .columns()
                    .every(function () {
                        let column = this;
                        let title = column.footer().textContent;
                        let input = document.createElement('input');
                        input.placeholder = title;
                        $(input).css("width", "100%"); // Set the input width to 100%

                        column.footer().innerHTML = ''; // Clear the footer cell
                        column.footer().replaceChildren(input);

                        
                        if (title === "Request Date") {
                            console.log("success request date")
                            $(this).html('<input type="text" id="datepicker" placeholder="Search ' + title + '" />');
                        }
                        else {
                            $(this).html('<input type="text" placeholder="Search ' + title + '" />');
                        }
                      
                        $(column.footer()).html(input);

                        input.addEventListener('keyup', () => {
                            if (column.search() !== this.value) {
                                column.search(input.value).draw();
                            }
                        });
                    });
            }
        });

    });

</script>

红色包围的输入文本与标题数据表的高度和宽度不同的问题