use a datatable in a datable details with scrollX

I'm trying to use a x-scrollable datatable in a datatable row details:

$('#example tbody').on('click', 'td.details-control', function () {
   //... cuted for clarity

    row.child( format(row.data()) ).show();
    tr.addClass('shown');
    $('#tid' + row.data().id.toString()).DataTable({
        "scrollX": true,  // <<<===========================
        "data": [{"a": "bla 1","b": "nli 2","c": "ira 3","d": "furor 4", "e":"ira 5"}],
        "columns": [
            {"data": "a", title: "A"},
            {"data": "b", title: "B"},
            {"data": "c", title: "C"},
            {"data": "d", title: "D"},
            {"data": "e", title: "E"},
            ]
    });
}

with the format function as follow:

function format ( d ) {
    return '<p>hello!</p><div style="width:99%">'+
        '<table id="tid' + d.id.toString() +  '" class="table table-bordered nowrap">'+
        '<thead></thead><tbody></tbody>'+        
        '</table></div><p>bye</p>';
}

please consider the followinfng fiddles for execution:

• without scrollX
• with scrollX

As you can see the header columns aren't aligned (in the details) with the row columns when scrollX is enabled.

I try several things like fixing the table width. But I can't get the table to scroll.

Can this be done ?