Tengo un problema con mi css. La tabla es responsive pero el contenido no. Estoy utilizando boostrap y algunas clases customizadas. La tabla esta hecha con jquery y js.
Dejo las clases css también.
https://prizes.birdmc.us/dashboard/dist/css/style.css
No entiendo porque pasa, he intentado varias cosas como cambiar el tamaño de la tabla pero nada ha dado resultado.
$(document).ready(function() {
$('#example thead tr').clone(true).appendTo( '#example thead' );
$('#example thead tr:eq(1) th').each( function (i) {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Buscar '+title+'" />' );
$( 'input', this ).on( 'keyup change', function () {
if ( table.column(i).search() !== this.value ) {
table
.column(i)
.search( this.value )
.draw();
}
});
});
var table = $('#example').DataTable( {
orderCellsTop: true,
fixedHeader: true
});
});
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<div class="row">
<div class="col">
<div class="card mb-grid">
<div class="table-responsive-md">
<table id="example" class="table table-actions table-striped table-hover mb-0" data-table>
<thead>
<tr>
<th scope="col">1º Apellido</th>
<th scope="col">2º Apellido</th>
<th scope="col">nombre</th>
<th scope="col">número de casa</th>
<th scope="col">apuntes</th>
<th scope="col">localización</th>
<th scope="col">acciones</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>1</td>
<td>loremp isum</td>
<td>
<span class="badge badge-pill badge-primary">a, a</span>
</td>
<td>
<button class="btn btn-sm btn-danger">Editar</button>
</td>
</tr>
</tbody>
</table>
<script>
</script>
</div>
</div>
</div>
</div>
Se agradece la ayuda, un saludo.