title: jQuery DataTable : Individual column searching on table header
body: <p>I have followed the steps on <a href="https://datatables.net/examples/api/multi_filter.html" rel="noreferrer">Individual column searching (text inputs)</a> and  <a href="https://datatables.net/examples/api/multi_filter_select.html" rel="noreferrer">Individual column searching (select inputs)</a> to use multiple filters on <a href="https://datatables.net/" rel="noreferrer">jQuery DataTable</a> and there are multiple filters on the footer. On the other hand, I want to move these filters to the header of the DataTable, but cannot align them horizontally as displayed on the image below. There are some examples as <a href="https://datatables.net/examples/plug-ins/range_filtering.html" rel="noreferrer">Custom filtering - range search</a>, but they are not aligned as well. Is it possible to do this? </p>
  
  <pre><code>$(document).ready(function() {
      // Setup - add a text input to each footer cell
      $('#example tfoot th').each( function () {
          var title = $(this).text();
          $(this).html( '&lt;input type="text" placeholder="Search '+title+'" /&gt;' );
      } );
  
      // DataTable
      var table = $('#example').DataTable();
  
      // Apply the search
      table.columns().every( function () {
          var that = this;
  
          $( 'input', this.footer() ).on( 'keyup change', function () {
              if ( that.search() !== this.value ) {
                  that
                      .search( this.value )
                      .draw();
              }
          } );
      } );
  } );
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/qjT99.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qjT99.png" alt="enter image description here"></a></p>