jQuery DataTable 페이지 매김 문제

jQuery DataTables 인 경우 최신 정보를 사용하고 있습니다.jQuery DataTable 페이지 매김 문제

나는 문제로 어려움을 겪고 있으며, 그것이 무엇이며 어떻게 고칠 지 확신하지 못합니다. 데이터 테이블의 맨 아래쪽 페이지 매김이 아래쪽 div 컨테이너와 겹치므로 왜이 작업을 수행하는지 잘 모르겠습니다. 누군가 그것을 도와 주실 수 있습니까?

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

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

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

이 내 페이지와 스타일 시트에있는 모든은 다음과 같습니다

<!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>

가 여기 내 캐스 케이 딩 스타일 시트입니다 :

여기 내 HTML 마크 업입니다. 내 데이터 테이블을 포함하는 div를보십시오. 데이터 테이블의 아래쪽이 아래쪽 패딩과 겹치는 것처럼 보입니다. 현재 IE 8과 FireFox 10.0.2의 최신 버전을 사용 중입니다.

출처

2012-03-07 Brendan Vogt