Datatables CSS broke with Mozilla - css

Question

I am using Datatables.js for a table in my website. I haven't changed the original CSS from datatables, but only in Mozilla, the CSS is broken for a reason.
Here is my HTML code:
<div class="full-container">
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-2">
<br><br>
<center>
adsense code
</center>
</div>
<div class="col-sm-9 col-md-9 col-lg-9">
<table id="myTable" class="table table-bordered table-striped tablesorter">
table content
</table>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#myTable').dataTable();
} );
</script>
Here is how it supposed to be in Chrome and Internet Explorer
And here is how it is in Mozilla

Answer 1

I had the same problem. To resolve it, you must add a new class before your table with the sDom option :
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#myTable').dataTable({
"sDom": 'fi<"clear">tp'
});
} );
</script>
The syntax of sDom is available here. Adapt it according to your needs. Here we add a new div with the clear class before the table.
Then add this CSS code to fix the bug :
.clear {
clear: both;
}