issue filter search inputs not have the same width as the corresponding table headers

ahmedbarbary1985

I work on asp.net MVC project . I face issue when apply column filter search per every column individually .

issue filter search inputs not have the same width as the corresponding table headers

so after apply filter search column width become bigger from before apply filter search .

so exactly I need after apply filter search for every column to make table width same width

as before .

code what I try is

<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 src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>


<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();
                            }
                        });
                    });
            }
        });
  });
and for CSS style :

 tfoot input {
        width: 100%;
        padding: 2px;
        box-sizing: border-box;
    }

kthorngren

I think that you will find this:

$('#dtbl tfoot tr').insertAfter($('#dtbl thead tr'))

Creates a new thead row not a tfoot. Use the browser's inspect tool to see what is actually created. You will need to update your selector for the CSS as appropriate, probably something like this:

 thead input {
        width: 100%;
        padding: 2px;
        box-sizing: border-box;
    }

Kevin