0

Estoy trabajando con BootStrap y en ordenador todo se ve bien, pero cuando lo veo desde un movil aparece algo invisible a la derecha que me genera un espacio transparente. Ya me di cuenta que es la tabla por que si la quito no aparece el error estetico. Esta es mi tabla:

<div class="col-11 col-xl-12 p-2">
                <div class="table-responsive">
                    <table class="table table-dark text-center table-bordered" id="tableTickets">
                        <thead>
                            <tr>
                                <th scope="col" class="text-center">Id</th>
                                <th scope="col" class="text-center">Usuario</th>
                                <th scope="col" class="text-center">Contraseña</th>
                                <th scope="col" class="text-center">Rol</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
                                for ($i=0; $i < $qUsers; $i++) { 
                                    //Write desc and date
                                    echo '<tr>
                                        <td valign="middle" align="center" class="text-center">'.$saveUsers[$i]['id'].'</td>
                                        <td valign="middle" align="center" class="text-center">'.$saveUsers[$i]['user'].'</td>     
                                        <td valign="middle" align="center" class="text-center">'.$saveUsers[$i]['pass'].'</td>      
                                    ';

                                    //Write the state
                                    switch ($saveUsers[$i]['type_user']) {
                                        case '1':
                                            echo '<td valign="middle" align="center" class="text-center">Usuario</td></tr>';
                                            break;
                                        case '2':
                                            echo '<td valign="middle" align="center" class="text-center">Administrador</td></tr>';
                                            break;
                                        default:
                                            # code...
                                            break;
                                    }
                                }
                            ?>
                        </tbody>
                    </table>
                </div>
            </div>

El error se ve de esta manera:

introducir la descripción de la imagen aquí

Cuando le quito el table-responsive, se sale la tabla(normal):

introducir la descripción de la imagen aquí

Necesito que funcione bien la tabla pero no se por que me da ese error estetico. Ya lo probe en un hosting y pasa lo mismo. Intente dejar un solo campo en la tabla y sucede lo mismo, aqui me di cuenta que el error no es del table-responsive:

introducir la descripción de la imagen aquí

2
  • 1
    Agrega un ejemplo mínimo verificable o comparte tu página web para poder validar el error que mencionas, generalmente es un elemento que tiene un width en pixeles y está desbordando fuera de tu dispositivo. Según la imagen usas datatables, revisa que estés usando la versión compatible con bootstrap-5 el 27 abr. 2022 a las 13:59
  • Nunca supe que era, remplaze la tabla completa de otro poryecto reciente y se arreglo
    – Mateo Guio
    el 27 abr. 2022 a las 22:17

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.