Responsive tabla no funciona

silens

Hola tengo esta tabla que es una subtabla pero no se hace responsive si pongo la instrucción de $(document).ready(function(

Si quito esa instrucción, el responsive funciona perfectamente.

function pry_1_his_n(pry){ 

var parametros = {
        "pry":pry, //Aqui tengo el id de la historia
    };
        
$(document).ready(function() { ///////////////////////////Si no pongo esto, SI SE HACE RESPONSIVE//////////////////
    tblHP=$('#tblHistoriaP').DataTable({
    
    "responsive": {
        "details": false,
    },
    
    "autoWidth": false,
    "responsive" : true,
    "paging":   false,
     "info":     false,
     "processing": true,
     "destroy": "true", 
     "language": {
        "url": "https://cdn.datatables.net/plug-ins/1.10.11/i18n/Spanish.json"
    },
        

    });
    
 });
    
    $.ajax ({
        async:false,
        data: parametros,
        "url": "php/pry_1_his_n.php",.
        type: "POST",
        success: function(data){
        objJson=JSON.parse(data);
        }   
    });
    
    
    var tblHistoriaP='<div class=" table-responsive">'+
    '<table id="tblHistoriaP" cellspacing="0" width="100%">'+
                        '<thead>'+
                            '<tr HEIGHT="5">'+
                                  '<td BGCOLOR="#979A9A">'+'<p>Historias</p>'+'</td>'+'<td BGCOLOR="#979A9A">Id:</td>'+'<td BGCOLOR="#979A9A">Nombre</td>'+ '<td BGCOLOR="#979A9A">Descripción</td>'+  '<td BGCOLOR="#979A9A">Presupuesto</td>'+
                            '</tr>'
                        +'</thead>'+'<tbody>';
    
    for(var i = 0; i < objJson.length; i++){
        tblHistoriaP += '<tr  style="cursor: pointer;">'+
        '<td>'+ '<button type=\"button\" title=\"Ver tareas de la historia\" class=\"tareaHP  btn btn-primary btn-xs \"><span class=\"glyphicon glyphicon-pencil\"></span></button>'+'  <button type=\"button\"  title=\"Ir a  historia\" class=\"historiaProyecto  btn btn-primary btn-xs \"><span class=\"glyphicon glyphicon-film\"></span></button>   ' + ' </th>'+'<td>'+objJson[i].id+'</td>'+'<td>'+objJson[i].name+'</td>'+ '<td>'+objJson[i].dsc+'</td>'+'<td>'+objJson[i].prsp_def+'</td>'+
        '</tr>';
    } 

   tblHistoriaP += '</tbody>'+'</table>'+'</div>';
   
    
    
    
    $('table').off('click','button.tareaHP');
    $('table').on('click', 'button.tareaHP', function(){
        var tr = $(this).closest('tr'); 
        var row = tblHP.row(tr);
        idHis= $(this).parent().siblings('td:first').text() ; 
        if ( row.child.isShown()){ 
            row.child.hide(); 
        }       
       else {
            row.child(tareas(idHis)).show();
            tr.addClass('shown');
        }
    });
    
    $('table').off('click','button.historiaProyecto');
    $('table').on('click', 'button.historiaProyecto', function (){
        idHP= $(this).parent().siblings('td:first').text() ; 
        //PlnDir('php/formTarea.php?idMisTareas='+idT+"&historia="+id);     
        origen="proyectos.html";
        PlnDir('php/formHistoria.php?idHis='+idHP+'&origen='+origen);
    });
    
return tblHistoriaP;                        
    
}

Si no pongo esa instrucción, no me funcionan algunos objetos de la tabla como la ordenacion . Muchas gracias.