title: Can't hide Jquery DataTable vertical scrollbar on thead
body: <p>I'm using jquery DataTables and bootstrap.</p>
  
  <p>On my thead appears a disabled vertical scrollbar like this:</p>
  
  <p><a href="https://i.stack.imgur.com/IoeiQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IoeiQ.png" alt="enter image description here"></a></p>
  
  <p>I'm trying to get rid off of that scrollbar, but without success.</p>
  
  <pre><code>//Fixed Columns (Freeze Panel)
          $(function () {            
              var table = $('#grdAfiliados').DataTable({
                  "fnInitComplete": function () {
                      // Disable scrolling in Head
                      $('.dataTables_scrollHead').css({                        
                          'overflow-x': 'hidden !important',
                          'overflow-y': 'hidden !important'                        
                      });
  
                      // Disable TBODY srcoll bars
                      $('.dataTables_scrollBody').css({
                          'overflow-y': 'scroll',
                          'overflow-x': 'hidden',
                          'border': '0'
                      });
  
                      // Enable TFOOT scoll bars
                      $('.dataTables_scrollFoot').css('overflow', 'auto');
  
                      // Sync TFOOT scrolling with TBODY
                      $('.dataTables_scrollFoot').on('scroll', function () {
                          $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
                      });
                  },
                  scrollY: "500px",
                  scrollX: true,
                  scrollCollapse: true,
                  paging: false,
                  fixedColumns: {
                      leftColumns: 1
                  }
              });
          });
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I realize that the problem appears when using "fixedColumns" parameter.</p>