0

Selecciono datos de una Base de Datos, y esos se colocan en una tabla, solo que al momento de verlo en pantalla para móvil no se ven bien.

Este es mi código .php:

<table class= "table table-responsive table-bordered table-striped small" width="100%">
                          
                            <tr>

                                <th>Nombre: </th>
                                <td>'. $nombre_completo. '</td>  

                            </tr>  
                            <tr>

                                <th>Curso: </th>
                                <td>'. $respuesta['curso'] = $curso;'</td>  

                            </tr>'; 

                            
                            echo '<tr>';
                        echo '<th>Lugar y fecha: </th>';
                        echo '<td>'. $respuesta['fecha'] = $fecha;'</td>';
                        echo '</tr>';

                        '</table> 

Añadí las librerías:

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Y se ve así:

introducir la descripción de la imagen aquí

Y me gustaría que se viera algo así:

introducir la descripción de la imagen aquí

1 respuesta 1

2

Debes usar la clase table-responsive de la siguiente forma:

<div class="table-responsive">
    <table ... > 
       ...
    </table>
</div>

Puedes apoyarte de la clase container (aunque en realidad es opcional).

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>



<h1>Con contenedor 📥:</h1>
<div class="container">
    <div class="row">
        <div class="div col">
            <div class="table-responsive">
                <table class="table table-bordered table-striped small" width="100%">
                    <tr>
                        <th>Nombre: </th>
                        <td>Lorem ipsum dolor sit amet consectetur.</td>
                    </tr>
                    <tr>
                        <th>Curso: </th>
                        <td>ISO XXXX:YYYY Lorem ipsum dolor sit amet consectetur.</td>
                    </tr>
                    <tr>
                        <th>Lugar y fecha: </th>
                        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, dignissimos?</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<br/>

<h1>Sin contenedor 📤:</h1>
<div class="table-responsive">
    <table class="table table-bordered table-striped small" width="100%">
        <tr>
            <th>Nombre: </th>
            <td>Lorem ipsum dolor sit amet consectetur.</td>
        </tr>
        <tr>
            <th>Curso: </th>
            <td>ISO XXXX:YYYY Lorem ipsum dolor sit amet consectetur.</td>
        </tr>
        <tr>
            <th>Lugar y fecha: </th>
            <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, dignissimos?</td>
        </tr>
    </table>
</div>


Si el problema persiste

Si aún tienes el mismo comportamiento asegurate de que en tu proyecto no haya una regla de css que afecte a las filas de una tabla (cosas fijas como td { min-width: 300px }) pero puedes ver todas las reglas de css que se le aplican a los elementos con el inspector de elementos (click derecho en la sección de la página) para encontrar el problema:

inspect-example

3
  • Hola, he intentado hacer lo que me dijiste, y el problema persiste, sin embargo vi el inspector y en element no me sale igual que a ti, que puedo hacer? ? =( Commented el 28 mar. 2021 a las 7:08
  • 1
    element es como una zona para probar cosas sobre un elemento en particular, en mi caso se ve un borde del lardo izquierdo de color verde, eso quiere decir que yo agregue esa línea, así que no te preocupes, no te sale igual y es normal. Lo que queda es buscar alguna línea donde haga referencia a las filas, o bien puedes subir lo que te parece a tu pregunta para que pueda verlo, aunque a veces son pedazos muy largos :( Commented el 28 mar. 2021 a las 7:24
  • Estaba haciendo algo mal yo jeje, pero si me ayudaste muchísimo, ya me salió ! =) Muchas gracias ^_^ Commented el 28 mar. 2021 a las 8:39

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.