title: Datatable with fixed column missalinged
body: <p>I am having an odd issue using DataTables with fixedColumn. Everything works fine but there is an space between the header and the list of rows that is displayed every-time I scroll the table horizontally.</p>
  
  <p><a href="https://i.stack.imgur.com/q3uZX.png" rel="nofollow noreferrer">Datatable issue</a></p>
  
  <p>However, I can scroll all fixed rows and the table looks fine. (Try this by clicking on any row into the first column and press arrows up and down)</p>
  
  <p><a href="https://i.stack.imgur.com/9QDC8.png" rel="nofollow noreferrer">DataTable after scrolling the fixedColumn</a></p>
  
  <p>Does anyone knows how to avoid this annoying issue? I appreciate any suggestion. 
  Here the code and libraries I am using.</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() {
    $('#MyTable').DataTable({
      paging: false,
      info: false,
      scrollX: true,
      fixedColumns: {
        leftColumns: 1
      }
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;!-- Data Table--&gt;
  &lt;link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css"&gt;
  
  &lt;script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.dataTables.min.css"&gt;
  &lt;script src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"&gt;&lt;/script&gt;
  
  &lt;link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.3/css/fixedHeader.dataTables.min.css"&gt;
  &lt;script src="https://cdn.datatables.net/fixedheader/3.1.3/js/dataTables.fixedHeader.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"&gt;&lt;/script&gt;
  
  &lt;table class="table table-bordered text-center" id="MyTable" style="width: 100%;"&gt;
    &lt;thead style="background-color: black; color: white;"&gt;
      &lt;tr&gt;
        &lt;th style="vertical-align: middle; text-align: center;"&gt;Fixed&lt;/th&gt;
        &lt;th style="vertical-align: middle; text-align: center;"&gt;X&lt;/th&gt;
        &lt;th style="vertical-align: middle; text-align: center;"&gt;Y&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr class="success"&gt;
        &lt;td&gt;row 1&lt;/td&gt;
        &lt;td&gt;193.38867&lt;/td&gt;
        &lt;td&gt;150.45493&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="danger"&gt;
        &lt;td&gt;row 2&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="danger"&gt;
        &lt;td&gt;row 3&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="danger"&gt;
        &lt;td&gt;row 4&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="success"&gt;
        &lt;td&gt;row 5&lt;/td&gt;
        &lt;td&gt;578.30164&lt;/td&gt;
        &lt;td&gt;544.329&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="success"&gt;
        &lt;td&gt;row 6&lt;/td&gt;
        &lt;td&gt;934.5156&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="danger"&gt;
        &lt;td&gt;row 7&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;0&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>