html表头不与表float_head对齐

我正在使用jquery。当我滚动时，floathead和我的表头不与我的表对齐。当我调整窗口大小时，表头会正确对齐，即使只是一点点。这是我的css:

table.floatThead-table {
    border-top: none;
    border-bottom: none;
    background-color: gray;
}

这是我的application.js文件:

$(document).ready(function(){  
var $table = $('.queue-display');
$table.floatThead();
$table.trigger('reflow');
});

这是我的jsfiddle链接，我不确定你是否真的能看出它不对齐:

http://jsfiddle.net/833eLyod/19/

<div style="overflow: hidden; padding-left: 0px; padding-right: 0px; position: absolute; margin-top: 0px; top: 60px; z-index: 1001; left: 0px; width: 643px;" aria-hidden="true" class="floatThead-floatContainer floatThead-container"><table class="queue-display                 table-striped                 table-hover                 table-condensed                 table-bordered                 unselectable floatThead-table" style="border-collapse: collapse; border-width: 1px 1px 0px; border-style: solid; border-color: rgb(221, 221, 221); display: table; margin: 0px; table-layout: fixed; width: 643px;"><colgroup><col style="width: 350px;"><col style="width: 72px;"><col style="width: 75px;"><col style="width: 80px;"><col style="width: 65px;"></colgroup><thead>
      <tr>
        <th class="queue-row-filename">
          <i class="fa fa-sort" data-bind="click: function() { toggleSortBy('filename') }"></i>
          filename
        </th>
        <!-- ko foreach: columns -->
        <th data-bind="attr: {'class': 'queue-row-' + $data}" class="queue-row-sticky.note">
          <!-- ko if: $parent.isSortableColumn($data) --><!-- /ko -->
          <span data-bind="text: $data">sticky.note</span>
          <span data-bind="if: $parent.isRemovableColumn($data)">
            <i class="fa fa-close" style="cursor: pointer;" data-bind="click: $parent.removeColumn">
            </i>
          </span>
        </th>
        <th data-bind="attr: {'class': 'queue-row-' + $data}" class="queue-row-taxonomy.history">
          <!-- ko if: $parent.isSortableColumn($data) --><!-- /ko -->
          <span data-bind="text: $data">taxonomy.history</span>
          <span data-bind="if: $parent.isRemovableColumn($data)">
            <i class="fa fa-close" style="cursor: pointer;" data-bind="click: $parent.removeColumn">
            </i>
          </span>
        </th>
        <th data-bind="attr: {'class': 'queue-row-' + $data}" class="queue-row-date">
          <!-- ko if: $parent.isSortableColumn($data) -->
            <i class="fa fa-sort" data-bind="click: function() { $parent.toggleSortBy($data) }"></i>
          <!-- /ko -->
          <span data-bind="text: $data">date</span>
          <span data-bind="if: $parent.isRemovableColumn($data)">
            <i class="fa fa-close" style="cursor: pointer;" data-bind="click: $parent.removeColumn">
            </i>
          </span>
        </th>
        <th data-bind="attr: {'class': 'queue-row-' + $data}" class="queue-row-queue">
          <!-- ko if: $parent.isSortableColumn($data) -->
            <i class="fa fa-sort" data-bind="click: function() { $parent.toggleSortBy($data) }"></i>
          <!-- /ko -->
          <span data-bind="text: $data">queue</span>
          <span data-bind="if: $parent.isRemovableColumn($data)">
            <i class="fa fa-close" style="cursor: pointer;" data-bind="click: $parent.removeColumn">
            </i>
          </span>
        </th>
        <th data-bind="attr: {'class': 'queue-row-' + $data}" class="queue-row-creator">
          <!-- ko if: $parent.isSortableColumn($data) -->
            <i class="fa fa-sort" data-bind="click: function() { $parent.toggleSortBy($data) }"></i>
          <!-- /ko -->
          <span data-bind="text: $data">creator</span>
          <span data-bind="if: $parent.isRemovableColumn($data)">
            <i class="fa fa-close" style="cursor: pointer;" data-bind="click: $parent.removeColumn">
            </i>
          </span>
        </th>
        <th data-bind="attr: {'class': 'queue-row-' + $data}" class="queue-row-mtime">
          <!-- ko if: $parent.isSortableColumn($data) --><!-- /ko -->
          <span data-bind="text: $data">mtime</span>
          <span data-bind="if: $parent.isRemovableColumn($data)">
            <i class="fa fa-close" style="cursor: pointer;" data-bind="click: $parent.removeColumn">
            </i>
          </span>
        </th>
        <!-- /ko -->
      </tr>
    </thead></table></div>

这是我的html。erb:

<!-- note that file_list.js will change this -->
<% content_for :title, 'Q' %>
<%= render 'q/queue/top_bar' %>
<div id="queue-app">

  <!-- note that this requires a tabindex so it can fire key press
  events -->
  <table class="queue-display
                table-striped
                table-hover
                table-condensed
                table-bordered
                unselectable"
         tabindex="0">

    <thead>
      <tr>
        <th class="queue-row-filename">
          <i class="fa fa-sort"
             data-bind="click: function() { toggleSortBy('filename') }"></i>
          filename
        </th>
        <!-- ko foreach: columns -->
        <th data-bind="attr: {'class': 'queue-row-' + $data}">
          <!-- ko if: $parent.isSortableColumn($data) -->
            <i class="fa fa-sort"
               data-bind="click: function() { $parent.toggleSortBy($data) }"></i>
          <!-- /ko -->
          <span data-bind="text: $data"></span>
          <span data-bind="if: $parent.isRemovableColumn($data)">
            <i class="fa fa-close"
               style="cursor: pointer;"
               data-bind="click: $parent.removeColumn">
            </i>
          </span>
        </th>
        <!-- /ko -->
      </tr>
    </thead>
    <tbody data-bind="foreach: {
                        data: visibleQueueFiles,
                        beforeRemove: hideQueueFileElement,
                        afterAdd: showQueueFileElement
                      }">
      <tr data-bind="css: {
                       selectedFile: selected,
                       activeFile: $parent.activeQueueFile() == $data,
                    }, attr: {'data-queue-file' : $data.id() }">
        <td>
          <button type="button" class="btn btn-default btn-xs"
                  data-bind="click: editFile">
            Edit
          </button>

          <a data-bind="click: function() { showInViewer() }"
             class="btn btn-default btn-xs">View</a>
          <span
                data-bind="text: filename,
                           style: {
                           'display' : 'inline-block',
                           'text-decoration': moved() ? 'line-through' : ''
                           }
                           ">
          </span>

          <span data-bind="if: moved">
            Moved to <span data-bind="text: moved_to_qid"></span>
          </span>
          <span data-bind="if: owner">
            <i class="fa fa-lock"></i>
          </span>
          <span data-bind="if: isNew">
            <i class="fa fa-plus"
               title="File added to queue"></i>
          </span>

        </td>
        <!-- ko foreach: $parent.columns -->
        <td class="qid"
            data-bind="text: $parent.displayForColumn($data),
                       attr: { 'title' : $parent.titleForColumn($data) }">
        </td>
        <!-- /ko -->

      </tr>
    </tbody>
  </table>
  <script type="text/javascript">
    $(document).ready(function() {
      var app = new queue.App(<%= @queue_info.to_json.html_safe %>);
      app.run();
      window.queueApp = app;
    });
  </script>
  <%= render 'q/queue/view_modal' %>
  <copy-dialog params="queueViewModel: $root"></copy-dialog>
  <rename-dialog params="queueFiles: selectedQueueFiles"></rename-dialog>
  <%= render 'q/queue/custom_queues_modal' %>
  <%= render 'q/queue/bottom_bar' %>

</div><!-- #queue-app -->