title: Column misaligned using DataTable fixedColumns
body: <p>I have a bug when I use fixedColumns property.</p>
  
  <p>The strange thing is that this bug does not happen always, but sometimes. And I don't know why.</p>
  
  <p><strong>Here's the bug</strong>:</p>
  
  <p><a href="https://i.stack.imgur.com/wyIZi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wyIZi.png" alt="enter image description here"></a></p>
  
  <p>Like you can see the row of the first column (that I have fixed) are misaligned.
  And, in the right bottom there are the buttons "Primo", "Precedente" .. etc.. that are not correctly displayed.</p>
  
  <p><strong>This is the code of the table</strong> (<em>I'm using Thymeleaf to display data session attribute)</em>:</p>
  
  <pre><code>&lt;table id="table" data-fixedLeftColumns="1" class="display noscroll sortable " style="max-width: 100%;" &gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Prog.&lt;/th&gt;
              &lt;th&gt;Tipo&lt;/th&gt;
              &lt;th&gt;Nome file&lt;/th&gt;  
              &lt;th&gt;Data emissione&lt;/th&gt; 
              &lt;th&gt;Num.&lt;/th&gt;           
              &lt;th&gt;Importo totale&lt;/th&gt;                     
              &lt;th&gt;Importo quota Miur&lt;/th&gt;         
              &lt;th&gt;Nota&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr th:each="..."&gt;                                      
              &lt;td th:text="..." &gt;&lt;/td&gt;
              &lt;td style="white-space: nowrap" th:text="..." &gt;&lt;/td&gt;
              &lt;td style="white-space: nowrap"&gt;
                  &lt;a th:id="..." th:value="..." &gt;
                  &lt;img class="tableIcon" th:src="..." title="..."/&gt;
                  &lt;span style="vertical-align: middle;" th:text="..." &gt;&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/td&gt;                                                                                   
              &lt;td th:text="..." &gt;&lt;/td&gt;    
              &lt;td th:text="..." &gt;&lt;/td&gt;
              &lt;td th:text="..." style="text-align: right;"&gt;&lt;/td&gt;  
              &lt;td th:text="..." style="text-align: right;"&gt;&lt;/td&gt;  
              &lt;td style="text-align: center;"&gt;
                  &lt;img th:if="..." th:name="..." th:id="..." class="tableIcon" th:src="..." title="Leggi nota" /&gt;
              &lt;/td&gt;
  
          &lt;/tr&gt;
      &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code> data-fixedLeftColumns="1"
  </code></pre>
  
  <p>is used from the js to identify the columns to fix.</p>
  
  <p><strong>Here's the js</strong>:</p>
  
  <pre><code>    var fixedLeftColumns, fixedRightColumns;
  
      $("#table").attr("data-fixedLeftColumns") === undefined ? 
              fixedLeftColumns = "0" : fixedLeftColumns = $(this).attr("data-fixedLeftColumns");
  
      $("#table").attr("data-fixedRightColumns") === undefined ? 
              fixedRightColumns = "0" : fixedRightColumns = $("#table").attr("data-fixedRightColumns");
  
      var dtSettings = {
              iDisplayLength : 10,
              bJQueryUI : true,
              bInfo : !$(this).hasClass('simple'),
              bDestroy : true,
              bFilter : !$(this).hasClass('simple'),
              bAutoWidth : false,
              bPaginate : !$(this).hasClass('simple'),
              sPaginationType : 'full_numbers',
              scrollCollapse : true,
              bLengthChange : true,
              stateSave : true,
              bSort : $(this).hasClass('sortable'),
              aaSorting : [],
              oLanguage : tableLocale,
              "lengthMenu" : [ [ 10, 25, 50, -1 ], [ 10, 25, 50, "Tutte" ] ],
              aoColumnDefs : [ {
                  bSortable : false,
                  aTargets : [ "non-sortable" ]
              } ],
              fnFooterCallback : footerCallback,
              fixedColumns: {
                  leftColumns: fixedLeftColumns,
                  rightColumns: fixedRightColumns
              }
          };
     $("#table").dataTable(dtSettings);
  </code></pre>
  
  <p>But, If I click on one of the columns in the heading (Prog., Tipo, Nome File.. etc), the table is correctly displayed (when I click on one of them the rows are ordered by what I have clicked, but this is not a js event):</p>
  
  <p><a href="https://i.stack.imgur.com/AZNbu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AZNbu.png" alt="enter image description here"></a></p>