I'm making a table using Datatables but I can not change the widths of the columns.
/*Modificar funciones tabla listado*/
$(document).ready(function() {
$("#table_id").DataTable({
sDom: '<"top"fli>t<"bottom"p><"clear">r',
sPaginationType: "full_numbers",
bProcessing: true,
bAutoWidth: false,
language: {
decimal: "",
emptyTable: "No hay test",
info:
"Mostrando desde el _START_ al _END_ del total de _TOTAL_ registros",
infoEmpty: "Mostrando desde el 0 al 0 del total de 0 registros",
infoFiltered: "(Filtrados del total de _MAX_ registros)",
infoPostFix: "",
thousands: ",",
lengthMenu: "Mostrar _MENU_ registros por página",
loadingRecords: "Cargando...",
processing: "Procesando...",
search: "Filtrar:",
zeroRecords: "No se ha encontrado nada atraves de ese filtrado.",
paginate: {
first: "Primera",
last: "Última",
next: "Siguiente",
previous: "Anterior"
},
aria: {
sortAscending: ": activate to sort column ascending",
sortDescending: ": activate to sort column descending"
}
},
columnDefs: [
{ width: "10px", targets: 0 },
{ width: "40px", targets: 1 },
{ width: "100px", targets: 2 },
{ width: "70px", targets: 3 },
{ width: "70px", targets: 4 },
{ width: "70px", targets: 5 }
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<table id="table_id" class="display">
<thead>
<tr>
<th>Sanitario</th>
<th>Nombre</th>
<th>Apellidos</th>
<th>Edad</th>
<th>Fecha</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hola</td>
<td>web</td>
<td>raro</td>
<td>Prueba</td>
<td>Prueba</td>
<td>
<button class="pr-3 pl-3">
<i class="fas fa-eye"></i> Ver</button>
</td>
</tr>
<tr>
<td>qwe</td>
<td>adf</td>
<td>raro</td>
<td>Prueba</td>
<td>Prueba</td>
<td>
<button class="pr-3 pl-3">
<i class="fas fa-eye"></i> Ver</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th rowspan="1" colspan="1">TOTAL</th>
<th colspan="5" rowspan="1">
<span id="total">19</span> Tests</th>
</tr>
</tfoot>
</table>