I have a table created with boostrap 3 and used datatable to have the data better organized and be able to search more easily. The problem that is presenting the table is that the titles are not well aligned as the size of the device is getting larger. Try to enclose the table inside a div with the table-responsive class but nothing, follow the same problem.
Here you can see the table when the screen is greater than 1366px
Now if I zoom to this screen or I see that table in a smaller device (for example screens of 1024px or lower), it looks like this:
and mobile titles are hidden or cut at a certain point:
As you can see, the columns of the body always go well, complete, but the problem is the headers.
This is the code of the table:
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="tabla_dinamica" style="display: table;">
<thead style=" cursor: default;">
<tr style="text-align: left;" id="cabecera_tabla">
<!--
<th style="width: 5%;">
<label>ID</label>
</th>
-->
<th style="width: 20%;"><!-- -->
<label>Solicitante</label>
</th>
<th style="width: 10%;"><!-- -->
<label>Estado</label>
</th>
<th style="width: 10%;"><!-- -->
<label>Fecha</label>
</th>
<th style="width: 10%;"><!-- -->
<label>Palabras</label>
</th>
<th style="width: 10%;"><!-- -->
<label>Precio</label>
</th>
<th style="width: 15%;"><!-- -->
<label>Fichero</label>
</th>
<th style="width: 10%;"><!-- -->
<label>Cupón(%)</label>
</th>
<th style="width: 15%;"><!-- -->
<label>Opciones</label>
</th>
</tr>
</thead>
<tbody style="" id="tablaResultados">
<?php foreach ($solicitudes as $key => $solicitud ): ?>
<tr>
<!--
<td>
<input type="hidden" class="id" value="<?php echo $solicitud['id_solicitud'] ?>">
<?php //echo $solicitud['id_solicitud'] ?>
</td>
-->
<td>
<?php echo $solicitud['solicitante'] ?>
</td>
<td>
<?php
$colorFondo="";
if ($solicitud['estado']==0){$colorFondo="#d58512";}
else if ($solicitud['estado']==1){$colorFondo="#35a2ff";}
else if ($solicitud['estado']==2){ $colorFondo="#5cb85c";}
else if ($solicitud['estado']==3){ $colorFondo="#ac2925";}
else if ($solicitud['estado']==4){ $colorFondo="#777777";}
else if ($solicitud['estado']==5){ $colorFondo="#d58512";}
else if ($solicitud['estado']==6){ $colorFondo="#35a2ff";}
?>
<input type="hidden" class="estado" data-estado="<?php echo $solicitud['estado'] ?>">
<span class="badge" style="background:<?php echo $colorFondo ?>" id="flagEstado<?php echo $solicitud['id_solicitud'] ?>">
<?php echo $solicitud['descEstado'] ?>
</span>
</td>
<td >
<?php echo date("d/m/y",strtotime($solicitud['fecha_solicitud'])); ?>
</td>
<td>
<?php echo $solicitud['numero_palabra'] ?>
</td>
<td style="text-align: right;">
<label>$</label><?php echo number_format($solicitud['precio'], 2) ?>
</td>
<td>
<?php
$nombre_fichero = $solicitud['fichero'];
$nuevo = "";
$pos = strpos($nombre_fichero, "fichero");
$pos2 = strpos($nombre_fichero, "texto");
if($pos == false)
{
$nuevo = "Texto Recibido";
}
else
{
$nuevo = "Fichero Recibido";
}
$ruta = trim($solicitud['path'], "/");
?>
<?php //echo $solicitud['path'] ?>
<a data-toggle="tooltip" data-placement="top" title="<?php echo $solicitud['fichero'] ?>" href="<?php echo $ruta; ?>" download><?php echo $nuevo; ?></a>
<input type="hidden" id="path" value="<?php echo $ruta; //$solicitud['path'] ?>">
</td>
<td>
<?php echo $solicitud['porcentaje'] ?>
</td>
<td>
<div class="btn-group dropMenu" role="group" onclick="obtenerEstado('<?php echo $solicitud['id_solicitud'] ?>')" >
<button type="button" class="not_block btn btn-primary dropdown-toggle-Opciones" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="menuOp">
opciones <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-op" id="flagBotoneraEstado<?php echo $solicitud['id_solicitud'] ?>">
<li id="aceptarSolicitud<?php echo $solicitud['id_solicitud'] ?>" style="display:none" role="presentation"><a style="padding:5px 60px 5px 5px" role="menuitem" tabindex="-1" onclick="accionAceptarSolicitud(<?php echo $solicitud['id_solicitud'] ?>)">
<!-- <img src="../images/comunes/aceptarTraduccion.png" style="display:inline;margin-right:5px"/> -->
<i class="fa fa-check-square solicitudes_Icons"></i> Aceptar solicitud </a></li>
<li id="eliminarSolicitud<?php echo $solicitud['id_solicitud'] ?>" style="display:none" role="presentation"><a style="padding:5px 60px 5px 5px" role="menuitem" tabindex="-1" onclick="accionEliminarSolicitud(<?php echo $solicitud['id_solicitud'] ?>)">
<!-- <img src="../images/comunes/eliminarTraduccion.png" style="display:inline;margin-right:5px"/> -->
<i class="fa fa-check-square"></i> Eliminar solicitud </a></li>
<li id="preguntarSolicitud<?php echo $solicitud['id_solicitud'] ?>" style="display:none" role="presentation"><a style="padding:5px 60px 5px 5px" role="menuitem" tabindex="-1" onclick="accion('pregunta', <?php echo $solicitud['id_solicitud'] ?>)">
<!-- <img src="../images/comunes/preguntarCliente.png" style="display:inline;margin-right:5px"/> -->
<i class="fa fa-check-square"></i> Preguntar al cliente</a></li>
<li id="entregarSolicitud<?php echo $solicitud['id_solicitud'] ?>" style="display:none" role="presentation"><a style="padding:5px 60px 5px 5px" role="menuitem" tabindex="-1" onclick="accion('entrega', <?php echo $solicitud['id_solicitud'] ?>)">
<!-- <img src="../images/comunes/entregarCliente.png" style="display:inline;margin-right:5px"/>-->
<i class="fa fa-check-square"></i> Entregar al cliente</a></li>
<li id="cancelarSolicitud<?php echo $solicitud['id_solicitud'] ?>" style="display:none" role="presentation"><a style="padding:5px 60px 5px 5px" role="menuitem" tabindex="-1" onclick="accion('cancelar', <?php echo $solicitud['id_solicitud'] ?>)">
<!--<img src="../images/comunes/cancelarTraduccion.png" style="display:inline;margin-right:5px"/> -->
<i class="fa fa-check-square"></i> Cancelar solicitud</a></li>
<li id="cambiarEstadoSolicitud<?php echo $solicitud['id_solicitud'] ?>" style="display:none" role="presentation"><a style="padding:5px 60px 5px 5px" role="menuitem" tabindex="-1" onclick="accion('estatus', <?php echo $solicitud['id_solicitud'] ?>)">
<!-- <img src="../images/comunes/cambiarEstado.png" style="display:inline;margin-right:5px"/> -->
<i class="fa fa-check-square"></i> Cambiar estado </a></li>
<li id="historialSolicitud<?php echo $solicitud['id_solicitud'] ?>" style="display:none" role="presentation"><a style="padding:5px 60px 5px 5px" role="menuitem" tabindex="-1" onclick="accion('historico', <?php echo $solicitud['id_solicitud'] ?>)">
<!-- <img src="../images/comunes/verHistorico.png" style="display:inline;margin-right:5px"/> -->
<i class="fa fa-check-square"></i> Ver histórico </a></li>
</ul>
</div>
</td>
</tr>
<?php endforeach ?>
</tbody>
</table>
</div>
Datatable code for the table:
$('#tabla_dinamica').DataTable({
scrollY: 300,
scrollCollapse: false,
lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "Todos"]],
pagingType: "full_numbers",
"order": [],
//retrieve: true,
paging: true
});
Bootstrap 3.7 and jquery 2 are used. Any ideas on how I could solve this problem?