0
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の最新バージョンを使用しています。