misalignment datatables thead and tbody (which appear in 2 different tables) - datatables

Question

I have an alignement problem with datatables. I checked other topics about this but still un resolved.
I generate a tbody with json datas, and first problem, the tbody is generated in a different table. This way, I have on one hand the head of the table, and on the other, the body. Really weird to me.
Second thing, and for me it's because of the first point, the head and the body are not aligned.
I precise that this is a project on which I took the hand. So I didn't build it myself, and I'm not relly comfortable with datatables.
Here is the source code :
<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 '<img src="/html/icons/zoom-icon.png">';
return cell;
}
}
]});
}
</script>
I really need some help on this one.
Thanks