Question

我正在使用最新的jQuery DataTables。

我正在努力解决一个问题，我不确定它是什么以及如何解决它。数据表的底部分页与我的底部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。

Answer 1

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

jQuery DataTable分页问题

1 个答案: