возможность увеличения ширины поискового фильтра таблицы

Question

Хотелось бы узнать, можно ли изменить ширину поля фильтра поиска с датой на это

Хотелось бы удвоить его текущую ширину

<div class="table-responsive">
    <table class="table table-hover" id="myTable">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">Added by</th>
                <th scope="col">Added at</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody class="custom-tbody">
        <?php $n = 1; ?>
            @foreach ($authors as $item)
                <tr>
                    <th scope="row">{{ $n++ }}</th>
                    <td>{{ $item->name }}</td>
                    <td>{{ $item->user->username }}</td>
                    <td>{{ $item->created_at }}</td>
                    <td>
                        <a href="authors/{{ $item->id }}/edit" 
                            class="btn btn-primary">Edit
                        </a>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

это весь мой код таблицы с использованием laravel.Но я не могу найти HTML-код "поля фильтра поиска", чтобы увеличить его ширину.datatable.css и datatable.js находятся в моей общей папке.

Answer 1

Добавьте этот CSS в файл css / jquery.dataTables.css:

.dataTables_filter input {
    width: 450px !important; 
}

Answer 2

Добавьте этот стиль на свою HTML-страницу или в файл CSS.

.dataTables_filter input {
    width: 500px; 
}

Измените ширину в соответствии с вашими требованиями.