Jquery DataTable：テーブルヘッダーが2回表示されます

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 

は、その後のヘッダーが正しく表示されている、私はスクロールを維持したいデータができるようにスクロールさせるために有効。

私が間違っている場所を教えてください。

おかげで、 カピル