数据表增加表搜索过滤器宽度

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添加到css / jquery.dataTables.css文件中：

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