title: DataTables : search field position misaligned
body: <p><br>
  I'm currently making a small website using JSP and DataTables (only for the 1st table at the moment). <br> 
  Here is what I have so far : <br>
  <img src="https://i.stack.imgur.com/lTyqN.jpg" alt="illustration of the problem with the search field position"></p>
  
  <p><br>
  As you can see, There is a positional problem of the search field. I really don't know what is causing this. What I would like to have, is the end of the search field not going further than the border of the bottom table.
  <br>
  Here is my HTML :<br></p>
  
  <pre><code>&lt;TABLE class="table table-striped table-bordered" id="usertable" style="max-width: 800px"&gt;
  &lt;thead&gt;
          &lt;TR&gt;
              &lt;Th colspan=2 align=center&gt;&lt;FONT color="blue"&gt;Toto&lt;/font&gt;&lt;br&gt;
                  &lt;i&gt; (toto@toto.be) &lt;/i&gt;&lt;b&gt;&lt;FONT color = "red"&gt;Administrateur&lt;/b&gt;&lt;/font&gt;
              &lt;/Th&gt;
              &lt;Th colspan=1 align=center&gt;&lt;a href="UserUpdate?action=update&amp;id=2"&gt;
                  &lt;button type="submit" class="btn btn-default"&gt;&lt;FONT color="green"&gt;&lt;span class ="glyphicon glyphicon-user"&gt;
                  &lt;/span&gt; Editer mon compte&lt;/FONT&gt;
                  &lt;/button&gt;&lt;/a&gt;
              &lt;/Th&gt;
          &lt;/TR&gt;
  
          &lt;TR&gt;
              &lt;Th width=40% align="center"&gt;&lt;span class ="glyphicon glyphicon-calendar"&gt;&lt;/span&gt; Date de la pêche&lt;/Th&gt;
              &lt;Th width=40% align="center"&gt;&lt;span class="glyphicon glyphicon-dashboard"&gt;&lt;/span&gt; Poids du poisson (Kg)&lt;/Th&gt;
              &lt;Th width=20% align="center"&gt;&lt;i&gt;Action&lt;/i&gt;&lt;/Th&gt;
          &lt;/TR&gt;
  &lt;/thead&gt;
  
  &lt;tbody&gt;
          &lt;TR&gt;
              &lt;TD width=40% align="center"&gt;03-07-2014&lt;/TD&gt;
              &lt;TD width=40% align="center"&gt;24.0&lt;/TD&gt;
              &lt;TD width=20% align=center&gt;&lt;a href="FlightUpdate?action=delete&amp;idvol=1"&gt;
                  &lt;button type="submit" class="btn btn-default" onclick="return confirm('Ok pour supprimer le vol ?')"&gt;
                  &lt;FONT color="purple"&gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt; Supprimer pêche&lt;/FONT&gt;
                  &lt;/button&gt;&lt;/a&gt;&lt;/TD&gt;
          &lt;/TR&gt;
          &lt;TR&gt;
              &lt;TD width=40% align="center"&gt;22-08-2014&lt;/TD&gt;
              &lt;TD width=40% align="center"&gt;42.0&lt;/TD&gt;
              &lt;TD width=20% align=center&gt;&lt;a href="FlightUpdate?action=delete&amp;idvol=2"&gt;
                  &lt;button type="submit" class="btn btn-default" onclick="return confirm('Ok pour supprimer le vol ?')"&gt;
                  &lt;FONT color="purple"&gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt; Supprimer pêche&lt;/FONT&gt;
                  &lt;/button&gt;&lt;/a&gt;&lt;/TD&gt;  
          &lt;/TR&gt;
  &lt;/tbody&gt;
  &lt;/TABLE&gt;
  </code></pre>
  
  <p>And my JS selector :
  <br></p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
      $('#usertable').dataTable( {
          "dom": '&lt;"top"fp&lt;"clear"&gt;&gt;rt'
      } );
        //$('.carousel').carousel();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><br>
  Of course, I'm using the JQuery libraries :<br></p>
  
  <pre><code>&lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="css/jquery.dataTables.css"&gt;
  &lt;link rel="stylesheet" href="css/jquery.dataTables_themeroller.css"&gt;
  &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.dataTables.min.js"&gt;&lt;/script&gt;         
  &lt;script src="js/vendor/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><br>Is there something I can do to have the sDom correctly aligned ? 
  <br>Thanks a lot !</p>