title: Scrollable DataTables table
body: <p>I'm trying to follow <a href="https://datatables.net/examples/basic_init/scroll_y_dynamic.html" rel="nofollow noreferrer">this example</a> on DataTables to get a scrollable, searchable fixed height table. Here is my snippet of code so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('#dataTables_paginate').DataTable({
      filter: true,
      info: false,
      scrollY: '25vh',
      scrollCollapse: true,
      paging: false,
      language: {
        search: "_INPUT_",
        searchPlaceholder: "Search..."
      }
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.dataTables_filter {
      float: left;
      text-align: left;
      padding: 0px;
      margin: 0px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.datatables.net/v/bs/jq-3.2.1/dt-1.10.16/datatables.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="container-fluid"&gt;
    &lt;div class="col-lg-4"&gt;
      &lt;table class="table table-striped table-bordered" id="dataTables_paginate"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;Name&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;Steve Jason Smith&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Steve Jason Smith&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Steve Jason Smith&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Steve Jason Smith&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Steve Jason Smith&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Steve Jason Smith&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Steve Jason Smith&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Steve Jason Smith&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Steve Jason Smith&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Steve Jason Smith&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Steve Jason Smith&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Steve Jason Smith&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Steve Jason Smith&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Steve Jason Smith&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Steve Jason Smith&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Steve Jason Smith&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Steve Jason Smith&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;Steve Jason Smith&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have two issues with the code I have written so far. First of all, the <code>&lt;thead&gt;</code> seems to be detatched from the main body of the table wheras I would like it to all stay together.</p>
  
  <p>Secondly, I have tried to left align the search box of the DataTable but I cannot get it to move over no matter what code I have used. Is there a way I can left align the search box and have it be the same width as the table?</p>