Add a new column in HTML with Bootstrap

Question

I'm working in a crud form (DB phpmyadmin), developed in html, js and php, queries are made with jquery. I have a problem with my code, when I add a column to my table the formatting is lost (search bar and "show -- registers "), is there a way to solve this problem?

code for the table in php

<div class="container">
    <div class="row">
        <div class="col-lg-12">            
        <button id="btnNuevo" type="button" class="btn btn-success" data-toggle="modal">Nuevo</button>    
        </div>    
    </div>    
</div>    
<br>  
<div class="container">
    <div class="row">
            <div class="col-lg-12">
                <div class="table-responsive">   
                    <!--cambiar nombre tabla-->     
                    <table id="tablaPersonas" class="table table-striped table-bordered table-condensed table-hover" style="width:100%">
                    <thead class="text-center">
                        <tr>
                            <th>Id</th>
                            <th>Nombre</th>
                            <th>País</th>                                
                            <th>Edad</th>
                            <th>Accion</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php                            
                        foreach($data as $dat) {                                                        
                        ?>
                        <tr>
                            <td><?php echo $dat['id'] ?></td>
                            <td><?php echo $dat['nombre'] ?></td>
                            <td><?php echo $dat['pais'] ?></td>
                            <td><?php echo $dat['edad'] ?></td>
                            
                                
                            <td></td>
                        </tr>
                        <?php
                            }
                        ?>                                
                    </tbody>        
                   </table>                    
                </div>
            </div>
    </div>  

code in js

 tablaPersonas = $("#tablaPersonas").DataTable({ 
   //"columnDefs":[{
   // "targets": -1,
   // "data":null,
   //"defaultContent": "<div class='text-center'><div class='btn-group'><button class='btn btn-primary btnEditar'>Editar</button><button class='btn btn-danger btnBorrar'>Borrar</button></div></div>"  
   //}],
    // cambiar el lenguaje a espanol 
"language": {
        "lengthMenu": "Mostrar _MENU_ registros",
        "zeroRecords": "No se encontraron resultados",
        "info": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
        "infoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
        "infoFiltered": "(filtrado de un total de _MAX_ registros)",
        "sSearch": "Buscar:",
        "oPaginate": {
            "sFirst": "Primero",
            "sLast":"Último",
            "sNext":"Siguiente",
            "sPrevious": "Anterior"
         },
         "sProcessing":"Procesando...",
    }
});

original table table with an additional column

Answer 1

It might be because you are rendering an empty <td></td> for the last column. You can try adding a value there and see if the table renders correctly.