Датируемая дочерняя строка не отображается в первом столбце в адаптивном режиме

Question

Я не уверен, что я делаю не так, но когда я нажимаю на подробности contro ,.дочерняя строка воспроизводится, но передается в новый столбец в конце таблицы данных.

Вот мой код:

<div class="col-xs-4">
<table id="exp_datatable" class="display ">
    <thead>
        <tr>
            <th>AccountNumber</th>
            <th>AccountCostCentre</th>
            <th>AccountDepartment</th>
            <th>Narrative</th>
            <th>TransactionAnalysisCode</th>
            <th>TaxType</th>
            <th>TaxCode</th>
            <th>Amount</th>
        </tr>
    </thead>
</table>

<script>   

    $(function() {

        $tepTable = $('#exp_datatable').DataTable ( {
            ajax: { // doing it this way allows me to invoke ajax.reload
                url: '../ajax/transactions.php',
                type: 'POST',
                data: {action:'get export preview'},
                dataType: 'json',
                dataFilter: function(data){
                    var jData = JSON.parse(data);
                    var dtData =JSON.stringify( {"data": jData});
                    return dtData;
                }
            },
            responsive: true,
            columns: [
                        { data: "nom_code" },
                        { data: "account_cost_centre" },
                        { data: "account_dept" },
                        { data: "narrative" },
                        { data: "trans_analysis_code" },
                        { data: "tax_type" },
                        { data: "tax_code" },
                        { data: "amount" }
            ]
        });       
    });


</script>

Myтаблица выглядит следующим образом:

И вот она с дочерним рядом:

Я действительно застрялпоэтому любая помощь очень ценится.Спасибо,

Ли