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 

然后头被正确显示，我想保持滚动使使数据能够滚动。

你能告诉我哪里出错了。

感谢， 卡皮尔