Как исправить появление этой таблицы данных с дочерним рядом?

Question

В настоящее время я отображаю таблицу с использованием таблиц данных jquery и хочу добавить дочерние строки. После копирования образца из datatables.net теперь отображаются дочерние строки, но содержимое (или ячейки) родительских дочерних строк перемещается горизонтально влево, когда отображаются дочерние строки, а затем возвращается содержимое родительского ряда. в исходное положение, когда дочерние строки скрыты.

Я уже пытался использовать "table-layout: fixed" для таблицы, но ничего не изменилось.

format(data) {
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
         '<tr>'+
             '<td>Full name:</td>'+
             '<td>'+data.name+'</td>'+
         '</tr>'+
      '</table>';
}

$('#pmDataTable tbody').on('click', 'td.details-control', function () {
     var tr = $(this).closest('tr');
     var row = pmDataTable.row(tr);

     if(row.child.isShown()) {
        row.child.hide();
        tr.removeClass('shown');
     }else {
        row.child(vmPM.formatInnerPayroll(row.data())).show();
        tr.addClass('shown');
     }
});

Я ожидаю, что содержимое внешнего вида родительских строк останется прежним (или начальным), но внешний вид действительно изменится.