Datatables Small Size

Datatables Small Size. Al momento de trabajar con Datatables por defecto suele generar una tabla normal con espacios en las celdas y textos grandes en nuestro documento HTML. Sin embargo, el problema radica a la hora de manejar múltiples columnas en las tablas.

Datatables Small Size

Para solucionar estos inconvenientes DATATABLES posee unas clases llamada «display compact» que debemos de declarar en la clase de la tabla.

Ejemplo de uso:

<table id="example" class="display compact" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>

Con la declaración agregada, nuestra tabla se compactara en los espacios de las celdas de la tabla. Veamos un gráfico.

En Datatables,  elimine el espacio libre (alto)

En algunos casos la anterior opción no suele aplicarse correctamente por algún estilo o framework de estilos, por esta razón podemos recurrir al CSS para compactarlo directamente en línea.

Solo debemos de agregar las siguientes líneas de CSS en nuestro archivo CSS o en una declaración en línea.

/* Reduce vertical spacing */

div.dataTables_wrapper div.dataTables_info {
  padding-top: 0px;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
  padding: 4px 8px 4px 8px;
}
/* End Reduce vertical spacing */

Al agregar las siguientes clases con sus propiedades obtendremos como resultado la siguiente figura.

Cambiar el tamaño del texto en Datatables

Para cambiar el tamaño del texto de las celdas en Datatables podemos recurrir a las siguientes instrucciones de código CSS
Entonces establecerías el tamaño de fuente de tu tabla:

table.dataTable td {
font-size: 1em;
}

Y luego use las clases RowGroup para cambiar el tamaño de fuente de las filas que contenga la tabla:

table.dataTable tr.dtrg-level-0 td {
font-size: 1.1em;
}

Para finalizar y conclusiones

Hoy hemos aprendido a personalizar nuestra tabla usando Datatables, en este caso quitando los espacios de nuestras celdas y gestionando el tamaño de los textos.
Además, hemos visto dos formas:

1. Usando clases del plugin Datatables
2. Declarando clases directamente con CSS nativo.