数据表添加按列搜索会更改表的大小

Question

我在桌子上添加了<tfoot>，桌子比以前大了2倍：

<div class="container">
<table class="table table-bordered" id="users-table" style="white-space: nowrap; margin: auto;">
<thead class="table-primary">
<tr>
<th>First Name</th>
<th>Verified Status</th>
<th>User Type</th>
<th>Birthdate</th>
<th>Email</th>
<th>Fiscal ID</th>
<th>Actions</th>
</tr>
</thead>
<tfoot class="table-info">
<tr>
<th>First Name</th>
<th>Verified Status</th>
<th>User Type</th>
<th>Birthdate</th>
<th>Email</th>
<th>Fiscal ID</th>
</tr>
</tfoot>
</table>
</div>

这是数据文件的脚本：

<script>
$(function() {
$('#users-table').DataTable({
processing: false,
serverSide: true,
columnDefs: [
{"className": "dt-center", "targets": "_all"}
],
ajax: '{{ route('admin.users-data') }}',
columns: [
{ data: 'user', name: 'user' },
{ data: 'email_verified_at', name: 'users.email_verified_at', 
render: function( data, type, full, meta ) {
if (data == null) {
return "<img class="" src="{{ asset('images/icons/no.png')}}" style="width:20%"/>";
} else {
return "<img class="" src="{{ asset('images/icons/yes.png')}}" style="width:20%"/>";
}


}
},
{ data: 'role', name: 'roles.role' },
{ data: 'birthdate', name: 'birthdate' },
{ data: 'email', name: 'email' },
{ data: 'fiscal_id', name: 'fiscal_id' },
{ data: 'action', name: 'action', orderable: false, searchable:false }
],
initComplete: function () {
this.api().columns().every(function () {
var column = this;
var input = document.createElement("input");
$(input).appendTo($(column.footer()).empty())
.on('change', function () {
column.search($(this).val(), false, false, true).draw();
});
});
}
});
});
</script>

当我在表上添加页脚以按列搜索时，表的大小发生了变化，它大了两倍，而且不接受任何样式。

有人能解释为什么会发生这种事吗，谢谢！

Answer 1

在我用stavkoverflow提出的4个问题中，我都回答了自己。。。

不管怎样，谁正在为此而挣扎，只需将其添加到您的css中即可：

tfoot input {
width: 100%;
}

编码快乐！