datatable 增加表格搜索过滤器宽度

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

将此样式添加到您的 html 页面或 CSS 文件中。

.dataTables_filter input {
    width: 500px; 
}

根据您的要求修改宽度。

Answer 2

在 css/jquery.dataTables.css 文件中添加这个 css：

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