Javascript HTML表和Datatables allignment

我有一个razor视图，其中HTML输出是一个使用DataTables javascript插件格式化的表，以通过分页、排序、搜索等奇特功能增强它。。 我的看法如下：

一切都像一个符咒，但正如你所看到的，搜索框和分页栏（用红色标记）出现在页面的最右边，而不是靠近表格本身（我希望它在绿色框中）。 有什么办法可以做到这一点吗

这是我的剃须刀代码：

我尝试过为表使用容器div和固定宽度，以及为表本身使用固定宽度，但没有成功

---

非常感谢您的帮助

使用

dom

参数将搜索框和寻呼机包装成一些

，然后使用CSS将它们对齐

例如：

$('#example').dataTable( {
  "dom": '<"top"f>t<"bottom"p>'
} );

$（'#示例'）。数据表（{
“dom”：“t”
} );

将生成以下HTML

<div class="top">
    {filter}
</div>
    {table}
<div class="bottom">
    {pagination}
</div>

{filter}
{table}
{分页}

---

使用

dom

参数将搜索框和寻呼机包装成一些

，然后使用CSS将它们对齐

例如：

$('#example').dataTable( {
  "dom": '<"top"f>t<"bottom"p>'
} );

$（'#示例'）。数据表（{
“dom”：“t”
} );

将生成以下HTML

<div class="top">
    {filter}
</div>
    {table}
<div class="bottom">
    {pagination}
</div>

{filter}
{table}
{分页}

为

设置

width=“100%”

属性，使其占据容器的整个宽度。因为您使用的是引导框架，所以应用相应的类

<table id="filesTable" class="table table-striped table-bordered" width="100%" cellspacing="0">

有关更多详细信息，请参见。

为

设置

width=“100%”

属性，使其占据容器的整个宽度。因为您使用的是引导框架，所以应用相应的类

<table id="filesTable" class="table table-striped table-bordered" width="100%" cellspacing="0">

---

有关详细信息，请参阅。

请粘贴代码，而不是代码的图片。此外，发布的代码没有显示任何css或secarch框/分页，您的表最初是否在隐藏的div中？如果是这样的话，看看这个：谢谢你的回答皮特：-我粘贴了一张图片，因为编辑对格式越来越着迷，根本不可读-表不在隐藏的div中：正如Gyrocedo.dom所说，问题在于引导，而与数据表无关（可能也可以通过datatables dom参数解决，但请粘贴代码，而不是代码的图片。此外，发布的代码不显示任何css或secarch box/pagination。问题是，您的表最初是否在隐藏的div中？如果是这样，请看一看：谢谢您的回答Pete:-我粘贴了一张图片，因为编辑器对for感到疯狂matting和根本不可读-表不在隐藏的div中：正如Gyrocedo.dom所说，问题在于引导，而与DataTables无关（也可以通过DataTables dom参数解决，谢谢，这很有效！！事实上问题在于引导谢谢，这很有效！！事实上问题在于引导