HTML表和数据表对齐

Question

我有一个剃刀视图，哪个HTML输出是一个用DataTables javascript插件格式化的表，以增强它的奇特功能，如分页，排序，搜索等。 我的观点如下：

一切都像魅力一样，但正如你所看到的，搜索框和分页栏（标记为红色）显示在页面的右侧，而不是靠近桌子本身（我希望它在绿色中）框）。 有没有想过要做到这一点？

这是我的剃刀代码：

我已尝试使用容器div作为表格和固定宽度，以及表格的固定宽度，但没有成功。

非常感谢！

Answer 1

使用dom参数将搜索框和寻呼机包装到某些<div>中，然后使用CSS将它们按照您想要的方式对齐。

例如：

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

将导致以下HTML

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

DataTables Reference: dom

Answer 2

为width="100%"设置<table>属性，使其占据容器的整个宽度。由于您使用的是Bootstrap框架，因此请应用相应的类。

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

有关详细信息，请参阅Bootstrap 3 example。