Estoy realizando un proyecto utilizando Datatables ahora quiero volver mi tabla responsive auctalmente mi tabla no cuenta con boostrap ya que la he desarrollado de forma manual ya el resto de la datatable esta funcionando de manera correcta y he seguido los datos señalados en la guía oficial de Datatable pero no he podido cuadrarlo aun y la verdad ya lo he intentado bastante y aun no he tenido ninguna clase de resultados a continuación mi código:
<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>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/responsive/2.2.9/css/responsive.bulma.min.css">
<script src="//cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<table class="datatable display responsive nowrap" cellspacing="0" id="tabl_product">
<thead>
<tr>
<th>Categoria producto</th>
<th>Nombre del producto</th>
<th>Descripción del producto</th>
<th>Cantidad</th>
<th>Valor</th>
<th>Imagen</th>
<th>ACCIONES</th>
</tr>
</thead>
<tbody id="producto">
<?php
$resultado = $query->fetchAll(PDO::FETCH_ASSOC);
foreach ($resultado as $row) { ?>
<tr>
<td><?php echo $row["NOMBRE_CATEGORIA_PRODUCTO"] ?></td>
<td><?php echo $row["NOMBRE_PRODUCTO"] ?></td>
<td><?php echo $row["DESCRIPCION_PRODUCTO"] ?></td>
<td><?php echo $row["CANTIDAD_PRODUCTO"] ?></td>
<td><?php echo $row["VALOR_PRODUCTO"] ?></td>
<td class="imagen_vista"><?php echo '<img src="'. $row["IMAGEN_PRODUCTO"] . '" style="width:300px;height:250px;border-radius:10px;background:none;">'?><td>
<!-- Actualizar registro -->
<a href="<?php echo constant('URL'); ?>admin/actualizar_producto?ID_PRODUCTO=<?php echo $row["ID_PRODUCTO"] ?>"><button class="abrirPopup-edit btn-edit" type="button" >Editar</button></a>
<!-- Eliminar registro -->
<a href="<?php echo constant('URL'); ?>app/models/admin/productos/eliminar_producto.php?ID_PRODUCTO=<?php echo $row["ID_PRODUCTO"] ?>" class="obtener_eliminar"><button class="abrirPopup-edit btn-delete" type="button">Eliminar</button></a>
</tr>
<?php
}
?>
</tbody>
</table>
<script>
$(document).ready( function () {
$('#tabl_product').DataTable({
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
},
responsive: true,
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5',
text: 'Exportar a excel',
className: 'button_excel',
color: 'red'
},
{
extend: 'pdfHtml5',
text: 'Exportar a pdf',
className: 'button_pdf'
},
],
"columnDefs": [{
"targets": 0
}],
});
} );
</script>