sScrollXInner space between header row / table body rows

twa

I am working on setting a datatable up that:

1. Has a fixed width (I have a large amount of columns).
2. Formatted in the Bootstrap manner.
3. Has paging or infinite rows with no paging (not a big deal).

The problem:

Whenever I enable "sScrollX" to accomplish #1, the header row is separated from the table body by a blank row.

From Chrome's inspector, there is a div covering both the blank row and the header row with a class entitled "dataTables_scrollHead."

The header row is in a div with the class "dataTables_scrollHeadInner."

The extra space row within the "dataTables_scrollHead" that is what I can't seem to get rid of.

Here is the code behind my table initialization:

[code]


$(document).ready(function() {
$('#test').dataTable({
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"bAutoWidth":false,
"sScrollX": "90%",
"bPaginate": true,
"bFilter": false
});
});
$.extend( $.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline"
} );

[/code]

allan

It looks like you need to adjust the CSS slightly for bootstrap tables which are scrolling:

[code]
div.dataTables_scrollHeadInner table { margin-bottom: 0px !important }
[/code]

You might also want to look at altering the rounded corners and the border on the header table (since you would get a 2px border).

Allan