why width of table increase after add tfooter for column search ?

Question

I work on asp.net mvc project . i face issue width of table increase after add filter search individually for every column 

so exactly i need give same width filter search  exactly as same width of header 

so How to solve this issue please ?

 

what i try as below :

<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;">
                @Html.DisplayNameFor(model => model.RequestNo)
            </th>
            <th style="border: 1px solid black;">
                @Html.DisplayNameFor(model => model.EmpID).ToString().Replace(":", "")
            </th>
            <th style="border: 1px solid black;">
                @Html.DisplayNameFor(model => model.EmpName).ToString().Replace(":", "")
            </th>
            <th style="border: 1px solid black;">View Form</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.ActionLink("View Form", "Details", new { id = item.RequestNo })
                </td>


            </tr>
        }
    </tbody>
    <tfoot>
        <tr>
            <th>RequestNo</th>
            <th>EmpID</th>
            <th>EmpName</th>

        </tr>
    </tfoot>

</table>



<script>
    $(document).ready(function () {
        

        new DataTable('#dtbl', {
            "dom": 'rtip',
            initComplete: function () {
                $('#dtbl tfoot tr').insertAfter($('#dtbl thead tr'))
                this.api()
                    .columns()
                    .every(function () {
                        let column = this;
                        let title = column.footer().textContent;

                         //Create input element
                        let input = document.createElement('input');
                        input.placeholder = title;
                        column.footer().replaceChildren(input);

                        //var input = $('<input type="text" placeholder="' + title + '" />');

                        //// Append input element to the footer cell
                        //$(column.footer()).html(input);

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