Jquery DataTable：Table headers出現兩次

Question

我正在使用Jquery DataTable來顯示數據。

<style type="text/css" title="currentStyle"> 
    @import '../css/demo_page.css'; 
    @import '../css/demo_table.css'; 
</style> 
<script type="text/javascript" language="javascript" src="../scripts/jquery.js"></script> 
<script type="text/javascript" language="javascript" src="../scripts/jquery.dataTables.js"></script> 

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 
     $('#example1').dataTable({ 
      "bAutoWidth": false, 
      "sScrollX": "100%", 
      "bPaginate": false 
     }); 
    }); 
</script>             

<div id="demo"> 
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="example1" > 
     <thead> 
      <tr> 
       <th>Query GeneID</th> 
       <th>Hit GeneID</th> 
       <th>EXON</th> 
       <th>Percentage</th> 
       <th>Align Length</th> 
       <th>No. of Mismatch</th> 
       <th>Gaps</th> 
       <th>Start Query Gene</th> 
       <th>End Query Gene</th> 
       <th>Hit Gene Start </th> 
       <th>End Gene Start</th> 
       <th>E-Value</th> 
       <th>Bit-Score</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td> AA1</td> 
       <td>AA3</td> 
       <td>AAAAAAAAAAAAA</td> 
       <td>AA3</td> 
       <td> AA1</td> 
       <td> AA1</td> 
       <td> AA1</td> 
       <td> AA1</td> 
       <td> AA1</td> 
       <td> AA1</td> 
       <td>AA1</td> 
       <td>AA1</td> 
       <td>AA1</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

當我嘗試打頁面，數據顯示越來越與<th>兩次出現的所有領域。 如果我刪除：

"bAutoWidth": false, 
"sScrollX": "100%", 
"bPaginate": false 

然後頭被正確顯示，我想保持滾動使使數據能夠滾動。

你能告訴我哪裏出錯了。

感謝， 卡皮爾