Datatables和Bootstrap sScrollY留下thead和tbody之間的空白

Question

我正在使用Bootstrap和Datatables。我有代碼來顯示一個表格，它可以正常工作，直到我添加sScrollY。只要我補充一點，我就會得到thead和tbody之間的差距。

就我所見，DataTables正在將thead和tbody分成兩個獨立的表。 Bootstrap css爲.table類提供margin-bottom：20px。所以，顯然這兩個表都會得到這個CSS類的應用，兩者之間的差距爲20px。

有沒有人遇到過這個？如果是這樣，你（我能）解決它嗎？

感謝

Answer 1

如果您使用的引導和數據表：

（1）您使用在這個職位上的數據表現場討論的代碼？ http://www.datatables.net/blog/Twitter_Bootstrap_2

（2）你是否在.container內包裝表格？

我不想建議採取這些步驟是使0123,按照預期工作的唯一方法，但我認爲採取這些步驟是您可以用來使表格按預期工作的一個選項。

下面是一個例子：
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" 
     } 
    }); 
}); 

注意，該示例使用DT_bootstrap.css和DT_bootstrap.js是來自於數據表blog post的jsbin代碼。