title: jQuery DataTable with footer not Responsive
body: <p>When I add a <code>tfoot</code> in table then table is <em>not responsive</em>? </p>
  
  <p>I have follow this example 
  <a href="https://datatables.net/examples/api/multi_filter.html" rel="nofollow">https://datatables.net/examples/api/multi_filter.html</a></p>
  
  <p>When I have footer with only text then is responsive, but when is input filed in footer then isn't responsive</p>
  
  <p><strong><em>HTML:</em></strong></p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;div class="col-sm-12"&gt;
      &lt;h2&gt;Persons&lt;/h2&gt;
  &lt;/div&gt;
  &lt;div class="col-sm-12"&gt;
  &lt;table id="tblPersons" class="table display table-hover table-striped userTables" &gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;ID&lt;/th&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Email&lt;/th&gt;
          &lt;th&gt;Telephone&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tfoot&gt;
      &lt;tr&gt;
          &lt;th&gt;ID&lt;/th&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Email&lt;/th&gt;
          &lt;th&gt;Telephone&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/tfoot&gt;
  &lt;tbody&gt;
  </code></pre>
  
  <p><strong><em>JS:</em></strong></p>
  
  <pre><code>$('#tblPersons thead th').each( function () {
      var title = $('#tblPersons tfoot th').eq($(this).index()).text();
      $(this).html('&lt;input type="text" class="form-control" placeholder="Search '+title+'" /&gt;');
  });
  
  var table=$("#tblPersons").DataTable({
      bSort:true,
      bPaginate:true,
      bFilter:true,
      bInfo:false,
      //"bLengthChange": false,
      responsive:true
  });
  
  table.columns().eq(0).each( function ( colIdx ) {
      $( 'input', table.column( colIdx ).header() ).on( 'keyup change', function () {
          table.column( colIdx ).search( this.value ).draw();
      });
  
      $('input', table.column(colIdx).header()).on('click', function(e) {
          e.stopPropagation();
      });
  });
  </code></pre>