использовать данные в деталях с датой scrollX

Question

Я пытаюсь использовать x-scrollable datatable в деталях строки данных:

$('#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>';
}

пожалуйста, рассмотрите следующие скриптыдля выполнения:

• без scrollX
• с scrollX

Как видно из столбцов заголовкане выровнены (в деталях) со столбцами строк, когда включен scrollX.

Я пробую несколько вещей, таких как фиксирование ширины таблицы.Но я не могу заставить таблицу прокручиваться.

Можно ли это сделать?