0

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

Chrome-Internet Explorer

And here is how it is in Mozilla

Mozilla

87387264223462
  • 110
  • 2
  • 12
Tasos
  • 7,325
  • 18
  • 83
  • 176
  • 1
    Don't use `
    `. Ever. It's deprecated, and should never ever be used anymore. To replace it, just use `
    ` or make a class that does that.
     – Joeytje50 Mar 13 '14 at 14:16
  • @Joeytje50 Didn't know that. I will change it and hopefully, we will see if this was the problem. – Tasos Mar 13 '14 at 14:20
  • It probably doesn't solve the problem, which is why I posted it as comment instead of as an answer, but it is something you should Always do. `
    ` is just outdated.
     – Joeytje50 Mar 13 '14 at 14:21

1 Answers1

2

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;
}
ncrocfer
  • 2,542
  • 4
  • 33
  • 38
  • I added it and now instead of the dropdown menu, I have in the same position the label "Showing 1 to 10 of 735 entries". Before that, this label was in the bottom of the table. I am satisfied with the result, but it's not 100% right. – Tasos Mar 13 '14 at 15:20
  • Like I said it's just an example for `sDom`. Change the order of the letters (f, i, t, p) according to your needs. If you want the label "Showing 1 to..." after your table, just put the "i" letter after the "t". – ncrocfer Mar 13 '14 at 15:26
  • Hmm. Didn't know that the letters represent the object. Then, you are right. Thank you :) – Tasos Mar 13 '14 at 15:29