错位数据表thead和tbody（出现在2个不同的表中）

Question

我遇到了数据表的问题。我检查了有关此问题的其他主题，但仍未解决。 我生成一个带有json数据的tbody，第一个问题是，tbody是在另一个表中生成的。这样，我一方面是桌子的头部，另一方面是身体。真的很奇怪我。 第二件事，对我来说，这是因为第一点，头部和身体没有对齐。

我确切地说这是一个牵手的项目。所以我自己没有构建它，而且我对数据表不太满意。

以下是源代码：

<table border="0" id="articleStatsByUser">
  <thead>
    <tr>
      <th>Nom</th>
      <th>Prénom</th>      
      <th>Nom du compte</th>
      <th>Site</th>
      <th>Marque</th>      
      <th>DE</th>
      <th>Nb<br>d'articles<br>consultés</th>
      <th>DO</th>
      <th>Email</th>
      <th>Login</th>
      <th>Date de dernière connexion</th>
      <th>Date de dernière connexion échouée</th>
      <th>Nb de connexions depuis l'espace privé</th>
      <th>Nb de connexions depuis la Newsletter</th>
      <th>Droit d'accès</th>
      <th>OCRM-ID</th>
      <th></th>
    </tr>
  </thead>
</table>


<script type="text/javascript">

var info = false;
var paginate = false;
var filter = true;

var viewDetailLink = '<%= viewDetailLink %>';
var jsonData = <%= userViewsJson %>;

$(document).ready(function($) {

     var oTable = $('#articleStatsByUser').dataTable( {
       "bInfo": info,
       "sDom": 'T<"clear">lfrtip',
       "oTableTools": {
           "sSwfPath": "/html/js/datatables/extras/TableTools/swf/copy_csv_xls.swf",
           "aButtons": [{"sExtends": "xls","sButtonText": 'Export le résultat en Excel', "sTitle": "statistiques-clients - COMPASS GROUP France"}]},
       "sPaginationType": "full_numbers",
       "sScrollY": "400px",
       "sScrollX": "100%",
       "bPaginate": paginate,
       "bFilter": filter,
       "bScrollCollapse": true,
       "bProcessing": true,
       "bDeferRender": true,
       "aaData": jsonData,
       "aoColumns": [
         { 
          "mData": "userName",
          "id": "userName"
        },
         { 
           "mData": "userFirstName"
         },
         {
         "mData": "userJob",
         "id": "userJob"
         },
         { 
           "mData": "userSite"
         },
         {
         "mData": "groupUser",
         "id": "groupUser"
         },
         { 
           "mData": "userDE",
         "id": "userDE"
         },
         { 
           "mData": "nbArticlesViews"
         },
         { 
           "mData": "userDO",
           "bVisible":    false
         },
         { 
           "mData": "userEmail",
           "bVisible":    false
         },
         { 
           "mData": "userScreenName",
           "bVisible":    false
         },
         { 
           "mData": "lastLoginDateExpr",
           "bVisible":    false
         },
         { 
           "mData": "lastFailedLoginDateExpr",
           "bVisible":    false
         }, 
         { 
           "mData": "nbConnexions",
           "bVisible":    false
         },
         { 
           "mData": "nbConnexionsNewsletter",
           "bVisible":    false
         },
         { 
           "mData": "droitAcces",
           "bVisible":    false
         },
         { 
           "mData": "userOCRMID",
           "bVisible":    false
         },
         {        
         "mData": null,
         "bSortable": false,
         "mRender": function( cell, type, row ){
               if (type === 'display')
                 return '<a href="'+ viewDetailLink + row.userScreenName +'" title="Voir la liste des articles"><img src="/html/icons/zoom-icon.png"></a>';
               return cell;
           }
         }
       ]});
}
</script>

我真的需要一些帮助。 感谢