Datatables and Bootstrap sScrollY leaving gap between thead and tbody

Question

I am using Bootstrap and Datatables. I have code to display a table which works fine up to the point where I add sScrollY. As soon as I add this I get a gap between thead and tbody.

As far as I can see DataTables is splitting the thead and tbody into two seperate tables. Bootstrap css gives margin-bottom: 20px to the .table class. So, obviously both tables get this css class applied, giving a 20px gap between the both.

Has anyone come across this? If so, how did you (can I) solve it?

Thanks

mg1075 mg1075 · Accepted Answer · 2013-06-01T15:18:52

If you are using Bootstrap and datatables:

(1) are you using the code discussed in this post on the datatables site? http://www.datatables.net/blog/Twitter_Bootstrap_2

(2) are you wrapping the table inside a .container?

I don't want to suggest that taking these steps is the only way to make the sScrollY work as you expect it to, but I think taking these steps is one option you could use to make the table work as expected.

Here's an example:
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"
        }
    });
});

Note in the jsbin code that the sample uses the DT_bootstrap.css and DT_bootstrap.js that come from the datatables blog post.

Datatables and Bootstrap sScrollY leaving gap between thead and tbody

1 Answers