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

【问题标题】：Datatables and Bootstrap sScrollY leaving gap between thead and tbody数据表和 Bootstrap sScrollY 在 thead 和 tbody 之间留下空隙
【发布时间】：2013-05-28 03:22:43
【问题描述】：

我正在使用 Bootstrap 和数据表。我有代码来显示一个可以正常工作的表格，直到我添加 sScrollY。一旦我添加了这个，我就会在 thead 和 tbody 之间找到一个间隙。

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

有人遇到过这个吗？如果是这样，您（我可以）如何解决？

谢谢

【问题讨论】：

标签： html css twitter-bootstrap datatables

【解决方案1】：

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

(1) 您是否在数据表网站上使用本文中讨论的代码？ 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。

【讨论】：

非常感谢。只需要从问题中退后一步，看看哪里出了问题。看起来我的“DT_bootstrap.js”链接搞砸了。