底部的导航栏隐藏了表格-如何修复bootstrap 3/自定义css？

Question

正如下面的截图所示，我的表分页被底部的导航栏隐藏了。

​

我试过了

{
float:left;
clear:both;
}

在表的封闭div上。但这并没有帮助。我还粘贴了从chrome开发人员工具中获取的HTML的屏幕截图。我正在使用自动生成分页的datatable jquery插件，因此它在原始html中不可用。我不想让分页隐藏在底部导航栏后面。如何解决这个问题？

​

​

编辑：

在firefox中，分页看起来很好。但是表中的每一行都向外延伸，如下所示

​

​

Answer 1

您是否尝试过将表放在div中，然后在div上设置overflow:visible属性，并在底部导航栏上设置clear:both属性？

而且，在下图中，桌子看起来像是被推到了右边。如果这只发生在Firefox中，如果Firefox：

@-moz-document url-prefix() { 
  table#search_table{
     margin:[difference];
  }
}

Answer 2

好吧，我找到了一个适合我的解决方案。

首先，我将表包装在一个div中。然后我添加了一个额外的div作为"Spacer“。看看下面的代码片段，使用你需要的大小：

           <div>            
              <table id="vertragsTabelle" class="table table-striped table-bordered">
                <thead>
                  <tr>
                    <th>Zuständige Stelle</th>
                    <th>Auszubildender</th>
                    <th>Beruf</th>
                    <th>Fachrichtung</th>
                    <th>Schwerpunkt</th>
                    <th>Betrieb</th>
                    <th>Beginn</th>
                    <th>Ende</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tfoot>
                  <tr>
                    <th>Zuständige Stelle</th>
                    <th>Auszubildender</th>
                    <th>Beruf</th>
                    <th>Fachrichtung</th>
                    <th>Schwerpunkt</th>
                    <th>Betrieb</th>
                    <th>Beginn</th>
                    <th>Ende</th>
                    <th>Status</th>
                  </tr>
                </tfoot>
              </table>
          </div>

          <!-- SPACER -->
          <div class="spacer" style="height:50px"></div>