数据表嵌套表

Question

我尝试使用数据表执行主细节，但响应式详细信息表不起作用。细节好像是另一行，但我想要的是一个单独的表，能够用它来做事。

这是我的代码

HTML

<table class="table table-striped table-bordered dt-responsive nowrap table-hover " id="ListaControlCacao" width="100%" aria-describedby="DataTables_Table_0_info" role="grid">
    <thead>
        <tr role="row">
            <th></th>
            <th>Puesto de observación</th>
            <th>Fecha</th>
            <th>Observador</th>
            <th>Boton floral</th>
            <th>Floracion</th>
            <th>Maduracion</th>
            <th>Fructificacion</th>
            <th>Valoración</th>
            <th>Rendimiento</th>
            <th>Enfermedades</th>
            <th>Plagas</th>

        </tr>
    </thead>
    <tbody></tbody>
</table>

JAVASCRIPT

var  ListaControlCacao = $('#ListaControlCacao').DataTable({
    "ajax": "/PuestoObservacionCacao/ListaPuestoObservacionCacaoxUsuario",
     //"lengthMenu": [[10, 20, 30, -1], [10, 20, 30, "All"]],
    dom: 'rtip',
    select: 'single',
    rowId: 'Id',
    deferRender: true,
    responsive: true,
    language: LenguajeDataTable,
    "columns": [
        {
            "Width": 2,
            "orderable": false,
            "data": null,
            "defaultContent": ''
        },
        { "data": "PuestoObservacionCacao" },
            { "data": "Fecha" },
            { "data": "Observador" },
            { "data": "BotonFloral" },
            { "data": "Floracion" },
            { "data": "Maduracion" },
            { "data": "Fructificacion" },
            { "data": "Valoracion" },
            { "data": "Rendimiento" },
            { "data": "Enfermedades" },
            { "data": "Plagas" }
    ]
});

$('#ListaControlCacao tbody').on('click', 'td', function () {

    if ($(this).index() == 0) { 
        return;
    }

    var tr = $(this).closest('tr');
    var row = ListaControlCacao.row(tr);

    if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row

        row.child(format()).show();
        tr.addClass('shown');

        var xyz =  $('#ListaDetalleControlCacao').DataTable({

            "bServerSide": true,
            "sAjaxSource": "/Cacao/ListarControlCacao3?IdPuestoObservacion=" + row.data().Id,
            "bProcessing": true,
            "pageLength": 10,
            //"lengthMenu": [[10, 20, 30, -1], [10, 20, 30, "All"]],
            dom: 'rtip',
            select: 'single',
            rowId: 'Id',
            deferRender: true,
            "responsive": true,
            buttons: [
                {
                    extend: 'colvis',
                    columns: ':not(:first-child)'
                }, 
                'copy', 
                'csv', 
                'excel', 
                'pdf', 
                'print'
            ],

            language: LenguajeDataTable,
            "aoColumns": [
                {
                    "sName": "Id",
                    "bSearchable": true,
                    "bSortable": true
                },
                { "sName": "Fecha" },
                { "sName": "Observador" },
                {
                    "sName": "BotonFloral",
                    "sWidth": 2
                },
                {
                    "sName": "Floracion",
                    "sWidth": 2
                },
                {
                    "sName": "Maduracion",
                    "sWidth": 2
                },
                {
                    "sName": "Fructificacion",
                    "sWidth": 2
                },
                { "sName": "ValoracionCultivo" },
                { "sName": "RendimientoCultivo" },
                { "sName": "Enfermedades" },
                { "sName": "Plagas" }
            ]
        });
    }
});

function format() {
    return ' <div class="table-responsive"> <table id="ListaDetalleControlCacao" class="table table-striped table-bordered display responsive dt-responsive nowrap table-hover"><thead><tr><th>No.</th><th>Fecha</th><th>Observador</th><th>Boton Floral</th><th>Floracion</th><th>Maduracion</th><th>Fructificacion</th><th>Valoracion</th><th>Rendimiento</th><th>Enfermedades</th><th>Plagas</th></tr></thead><tbody></tbody></table> </div>';
}

它的外观如何：