0

Tengo un problema con una tabla de bootstrap, y es que el header no sale alineado con las columnas de la tabla y creo que es culpa del botón de búsqueda y lo de Show x entries si lo quito del js se alinea perfecto.

He probado a mirar en la propia web de bootstrap a ver si cometía algún error, pero esta todo correcto y no logro que se visualize como debería.

introducir la descripción de la imagen aquí

Cabe decir que el footer si que esta perfectamente alineado.

Aquí mi código:

<table id="dtWorkers" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
<thead>
                                        <tr>
                                            <th></th>
                                            <th></th>
                                            <th></th>
                                            <th class="success" style="text-align:center" colspan="3">Dias Vacaciones</th>
                                            <th></th>
                                        </tr>
                                        <tr>

                                            <th>Nombre</th>
                                            <th>Departamento</th>
                                            <th>Puesto</th>
                                            <th class="success">Ganados</th>
                                            <th class="success">Tomados</th>
                                            <th class="success">Restantes</th>
                                            <th>Opciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
 @foreach ($workers as $worker)
                                        <tr>
                                            <!--<td scope="row">{{$worker->id}}</td>-->
                                            <td>{{ucwords($worker->name)}}</td>
                                            <td>{{ucwords($worker->area->name)}}</td>
                                            <td>{{ucwords($worker->position)}}</td>
                                            <td class="success">{{$vacationDays=MyHelper::vacationDays($worker->date_in)}}</td>
                                            <td class="success">{{$vacationTaken=MyHelper::vacationTaken($worker->id)}}</td>
                                            <td class="success">{{$vacationDays-$vacationTaken}}</td>
                                            <td>
                                                <!-- Single button -->
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-outline-primary" data-toggle="dropdown">
                                                        <i class="icon-calendar5"></i>
                                                        <span class="caret"></span>
                                                    </button>

                                                    <ul class="dropdown-menu" role="menu">
                                                    <li><a href="{{ url('/vacation/create/'.Crypt::encrypt($worker->id).'/'.Crypt::encrypt($worker->name))}}" > Asignar Vacaciones</a></li>
                                                        <li class="divider"></li>
                                                        <!--crear ruta para editar usuarios desde el panel
                                                            <li><a href="{{ url('/worker/remove/'.Crypt::encrypt($worker->id) ) }}">Editar usuario</a></li>
                                                        --><li class="divider"></li>
                                                        <li><a href="{{ url('/worker/remove/'.Crypt::encrypt($worker->id) ) }}">Borrar usuario</a></li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>

                                    <tfoot>
                                        <tr>
                                        <th>Nombre</th>
                                        <th>Departamento</th>
                                        <th>Puesto</th>
                                        <th class="success">Ganados</th>
                                        <th class="success">Tomados</th>
                                        <th class="success">Restantes</th>
                                        <th>Opciones</th>
                                        </tr>
                                    </tfoot>
                                </table>

Y mi js:

<script>
$(document).ready(function () {
$('#dtWorkers').DataTable({
    "scrollX": true,
});
<-- Si omito esto si que se alinea todo-->
$('.dataTables_length').addClass('bs-select');
});   
 <!----->
</script>

Edito: Subo foto de lo que hace bt-select en js

introducir la descripción de la imagen aquí

Como puedes ver, el buscador de filas en la tabla y el Show 10 entries, es lo que carga ese bt-select, si lo omito en mi codigo se ve todo perfecto, pero si lo pongo me descuadra el header, sin embargo ahi va bien.

Aqui pongo el js que se encarga de añadir dataTables_Length,

introducir la descripción de la imagen aquí

Gracias por su ayuda.

16
  • ¿Que es lo que no esta bien alienado? ¿Puedes enseñarnos una imagen de bien y otra de mal? Commented el 18 mar. 2019 a las 14:23
  • Arriba en mi post, tienes una imagen, si te fijas donde dice "Tomados", en el header, no cuadra con la casilla del body que tiene justo debajo, y lo mismo ocurre con las demas columnas. Si elimino la parte que ves encima del header, lo de "search: ..." y lo de "Show x entries" si omito eso del js, se visualiza todo alineado. te pongo una foto de como se veria si estubiera bien, pero creo que se aprecia bien. Saludos y gracias
    – Peisou
    Commented el 18 mar. 2019 a las 14:25
  • He estado haciendo pruebas y me funciona perfectamente, ¿Has probado en otros navegadores? ¿Algun estilo que se este aplicando por algun otro componente? Commented el 18 mar. 2019 a las 14:37
  • Si, he probado en varios navegadores, tanto explorer, como safari, como chrome, y en ninguno lo visualizo bien. Que yo sepa no, simplemente el javascript, lo que yo añadi a mas sobre la tabla fue el doble header, y el js. Aparte de usarlo en laravel
    – Peisou
    Commented el 18 mar. 2019 a las 14:48
  • En este caso creo que bootstrap podría solucionar tu problema. Te recomiendo que leas el sistema de Grid y lo utilices para ordenar tu tabla.
    – Argos
    Commented el 18 mar. 2019 a las 14:55

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.