DataTables renders height on 0px

goopcat

So you'll see in the picture linked that when I use scrollX another <thead> element is created. In that <thead> contains a <tr> with a height of 0px.

but in the picture you can see that it renders it with a height of 20px.

http://oi57.tinypic.com/1zflqah.jpg

$.ajax({
        type : 'post',
        url : '/report_data',
        data : $('#the_form').serialize(),
        success : function(data) {
            $('#table').html('<table id="dataTable" class="table table-striped table-bordered table-hover dataTable"></table>');
            $('#dataTable').dataTable({
                "data" : data.data,
                "columns" : data.columns,
                "scrollX" : "50%"

            });
        }
});

goopcat

You can see that the height should be 0px but it's rendering with 20px.

goopcat

Found the CSS conflict in the Theme we are using.