How do I style a child row in server-side ,responsive, row-detail table?

How do I style a child row in server-side ,responsive, row-detail table?

peruanersperuaners Posts: 3Questions: 1Answers: 0

Spent many days figuring this out and can´t find an answer in forum.Hopefully someone out there can help me out :) I want my styles from column "Teatergrupp" and column "Status" to follow along inside child when I resize the window and thoose columns appear there. See page here:denlillateatern.se/2017/datatabell/tabell.php
Part of code here:

$( document ).ready( function () {
            var dt = $( '#example' ).DataTable( {
                        
                "responsive": true,
                "processing": true,
                "serverSide": true,
                "ajax":      "scripts/ids-objects.php",
                
                "columnDefs": [{
                "targets": [6],
                "createdCell": function(td, cellData, rowData, row, col) {
                                switch(cellData) {
                                case "Utsålt":
                                $(td).addClass('utsalt');
                                break;   }}},],
    
                "columns": [ 
                    {
                        
                        "orderable": false,
                        "data": null,
                        "defaultContent": ""
                    },{
                        "data": "fst_datum",
                        className: "all"
                    }, {
                        "data": "fst_tid",
                        className: "all"
                    }, {
                        "data": "fst_namn",
                        className: "all"
                    }, {
                        "data": "grupp_namn",
                        className: "min-phone"
                    }, {
                        "data": "age",
                        className: "min-phone"
                    }, {
                        "data": "show_not",
                        className: "min-phone"
                    }, {
                        "data": "boka",
                        className: "min-phone",
                        render: function ( data, type, row ) { 
                            if ( row.boka.substring( 0, 1 ) == '0' ) {
                                return row.boka;
                            } else {
                                return '<a href="' + row.boka + '">Boka online</a>';}}
                    }, {
                        "data": "img",
                        className: "none",
                        "render": function ( data, type, row ) {
                            return '<img src="' + data + '" />';}
                    }, {
                        "data": "fst_beskrivning",
                        className: "none"
                    }
                ],

                "order": [
                    [ 1, 'asc' ]
                ],

                ],} );
            


        
            var detailRows = [];

            $( '#example tbody' ).on( 'click', 'tr td.details-control', function () {
                var tr = $( this ).closest( 'tr' );
                var row = dt.row( tr );
                var idx = $.inArray( tr.attr( 'id' ), detailRows );

                if ( row.child.isShown() ) {
                    tr.removeClass( 'details' );
                    row.child.hide();

                    // Remove from the 'open' array
                    detailRows.splice( idx, 1 );
                } else {
                    tr.addClass( 'details' );
                    row.child( format( row.data() ) ).show();

                    // Add to the 'open' array
                    if ( idx === -1 ) {
                        detailRows.push( tr.attr( 'id' ) );
                    }
                }
            } );

            // On each draw, loop over the `detailRows` array and show any child rows
            dt.on( 'draw', function () {
                $('tr td:nth-child(5)').each(function (){
          $(this).addClass('image')
    });
                
                $.each( detailRows, function ( i, id ) {
                    $( '#' + id + ' td.details-control' ).trigger( 'click' );
                } );
            } );
        } );
This discussion has been closed.