在scrollX中使用数据表详细信息中的数据表

Question

我正在尝试在数据表行详细信息中使用x滚动数据表：

$('#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"},
            ]
    });
}

具有如下格式功能：

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>';
}

请考虑执行以下操作：

• without scrollX
• with scrollX

如您所见，启用scrollX后，标题列（在详细信息中）与行列不对齐。

我尝试了几种方法，例如固定表格宽度。但是我无法使表格滚动。

可以这样做吗？