数据表和Bootstrap sScrollY在thead和tbody之间留下空隙

Question

我正在使用Bootstrap和Datatables。我有代码来显示一个表，它可以正常工作，直到我添加sScrollY。一旦我加上这个，我就得到了thead和tbody之间的差距。

据我所知，DataTables将thead和tbody分成两个单独的表。 Bootstrap css为.table类提供margin-bottom：20px。因此，显然两个表都应用了这个css类，两者之间的差距为20px。

有没有人碰到过这个？如果是这样，你（我可以）如何解决它？

由于

Answer 1

如果您使用的是Bootstrap和数据表：

（1）你在datatables网站上使用这篇文章中讨论的代码吗？ http://www.datatables.net/blog/Twitter_Bootstrap_2

（2）你把桌子包裹在.container吗？

里面

我不想建议采取这些步骤是让sScrollY按预期工作的唯一方法，但我认为采取这些步骤是您可以用来使表格工作的一个选项正如所料。

这是一个例子：
的 http://jsbin.com/atofot/1
的 http://jsbin.com/atofot/1/edit

$(document).ready(function() {
    $('#new-example').dataTable( {
        "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
        "sScrollY": "200px",
        "sPaginationType": "bootstrap",
        "oLanguage": {
            "sLengthMenu": "_MENU_ records per page"
        }
    });
});

请注意，jsbin代码中的示例使用来自数据表blog post的DT_bootstrap.css和DT_bootstrap.js。