jQuery DataTable分页问题

我使用最新的如果jQuery DataTables。jQuery DataTable分页问题

我正在努力解决一个问题，我不确定它是什么以及如何解决它。数据表的底部分页与我的底部div容器重叠，我不确定它为什么这样做？有人能帮我解决问题吗？

这里是我的HTML标记：

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <link href="Assets/DataTables-1.9.0/jquery.dataTables.css" rel="stylesheet" type="text/css" /> 
     <link href="Assets/Stylesheets/pbe_l_r2.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 

     <div class="main-container">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</div> 
     <div class="main-container">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</div> 
     <div class="main-container"> 

      <table id="example"> 
       <thead> 
        <tr> 
         <th>Rendering engine</th> 
         <th>Browser</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td>Gecko</td> 
         <td>Mozilla 1.8</td> 
        </tr> 
        <tr> 
         <td>Webkit</td> 
         <td>Safari 1.2</td> 
        </tr> 
        <tr> 
         <td>Gecko</td> 
         <td>Mozilla 1.8</td> 
        </tr> 
        <tr> 
         <td>Webkit</td> 
         <td>Safari 1.2</td> 
        </tr> 
       </tbody> 
      </table> 

     </div> 

     <script src="Assets/JavaScripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
     <script src="Assets/DataTables-1.9.0/jquery.dataTables.min.js" type="text/javascript"></script> 
     <script> 

      $(document).ready(function() { 
       $('#example').dataTable(); 
      }); 

     </script> 

    </body> 
</html>

这里是我的层叠样式表：

h1,h2,h3{margin-top:0;} 

#extra{width:300px;} 
#main{width:725px;} 

.main-container{border:1px solid #000;padding:1em 1em 1em 1em;}

这是所有我有我的网页和样式表上。看看包含我的数据表的div。数据表的底部似乎与底部填充重叠。我目前使用IE 8和FireFox 10.0.2的最新版本。

来源

2012-03-07 Brendan Vogt

我在表格后添加了<div style="clear:both"></div>。

来源

2012-03-08 11:07:40

jQuery DataTable分页问题

回答

相关问题