0

estoy creando una tabla con Bootstrap 4 pero tengo un problema, la intento hacer reponsiva siempre mediante la clase table-responsive pero al parecer no funciona, ya que al volver mas pequeña la pantalla simplemente el contenido de la tabla se extiende de manera vertical y apenas me deja un mínimo de desplazamiento horizontal suficiente para no deformar la tabla, sin embargo no es lo que busco, ya que pretendo hacer que la tabla simplemente se desplace en horizontal hasta el final.

Dejaré una imagen y luego el código correspondiente:

Esta es la página con la tabla al 100% de la pantalla

En pantalla completa no hay problema... pero cuando la adapto a un iPhone X ocurre esto:

Adaptado a un iPhoneX

Nótese todo el espacio en blanco que deja entre una fila y otra, corresponde a la información de la ultima celda de la fila:

introducir la descripción de la imagen aquí

Llegados a este punto lo que quiero es que la tabla continúe con un desplazamiento horizontal y no "verticalice" el contenido de la celda.

<div class="container">
      <div class="row">
        <div class="col-12">
          <div class="table-responsive">
            <table class="table">
              <thead>
                <tr>
                  <th scope="col">Criatura</th>
                  <th scope="col"> </th>
                  <th scope="col">Hp</th>
                  <th scope="col">Exp</th>
                  <th scope="col">Charms</th>
                  <th scope="col">Dificultad</th>
                  <th scope="col">Loot</th>
                </tr>
              </thead>
              <tbody>

                <tr>
                  <td>
                      <a href="#">Azure Frog</a>
                  </td>
                  <td>
                    <img src="img/criature-sprite/Azure_Frog.gif" alt="">
                  </td>
                  <td class="text-center">
                    60
                  </td>
                  <td class="text-center">
                    20
                  </td>
                  <td class="text-center">
                    15
                  </td>
                  <td class="text-center">
                    <img src="img/ico/bestiario_facil.gif" alt="">
                  </td>
                  <td>
                    <small>
                    <span class="font-weight-bold">Común:</span> 0-11 Gold Coins.<br>
                    <span class="font-weight-bold">Incomún:</span> Worm.<br>
                    <span class="font-weight-bold">Durante Eventos:</span> Bunch of Winterberries, Envelope from the Wizards, Fireworks Rocket, Party Hat, Party Trumpet, Snowball‎.
                  </small>
                  </td>
                </tr>

                <tr>
                  <td>
                      <a href="#">Bog Frog</a>
                  </td>
                  <td>
                    <img src="img/criature-sprite/Bog_Frog.gif" alt="">
                  </td>
                  <td class="text-center">
                    25
                  </td>
                  <td class="text-center">
                    0
                  </td>
                  <td class="text-center">
                    5
                  </td>
                  <td class="text-center">
                    <img src="img/ico/bestiario_facil.gif" alt="">
                  </td>
                  <td>
                    <small>Ninguno.</small>
                  </td>
                </tr>
               
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

Intenté usar la clase text-truncate y cumple su función perfectamente en pantallas pequeñas, pero a mayor tamaño me deja un scroll que no es lo que busco.

Dejo la imagen por acá:

text-truncate a pantalla completa general un scroll-x

En pantalla pequeña funciona perfectamente:

text-truncate en pantalla pequeña funciona correctamente, pero en pantalla grande me genera el scroll

Y eso es todo... me gustaría que se viera como en la imagen anterior al hacer la pantalla mas pequeña y que se siga viendo igual de bien en pantalla normal.

Un abrazo y gracias de antemano por la ayuda que puedan proporcionarme. Saludos!

2
  • Si no es necesario mostrar todo el texto puede aplicar la clase a un span. .ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } el texto se corta al ancho definido en el contenedor padre. el 13 nov. 2020 a las 23:54
  • El problema es que el texto es vital que sea visible. Lo ideal sería que en pantalla pequeña en vez de extenderse en la vertical, lo hiciera sólo en la horizontal. Actualmente el scroll está limitado al ancho que ocupa el encabezado de la tabla y no el de las celdas, que es como debería ser.
    – Nick Cam
    el 13 nov. 2020 a las 23:59

2 respuestas 2

2

Tal vez no es lo que necesitas, pero puede que te de una perspectiva distinta.

<div class="container">
      <div class="row">
        <div class="col-12">
          <div class="table-responsive">
            <table class="table">
              <thead>
                <tr>
                  <th scope="col">Criatura</th>
                  <th scope="col"> </th>
                  <th scope="col">Hp</th>
                  <th scope="col">Exp</th>
                  <th scope="col">Charms</th>
                  <th scope="col">Dificultad</th>
                  <th scope="col">Loot</th>
                </tr>
              </thead>
              <tbody>

                <tr>
                  <td>
                      <a href="#">Azure Frog</a>
                  </td>
                  <td>
                    <img src="img/criature-sprite/Azure_Frog.gif" alt="">
                  </td>
                  <td class="text-center">
                    60
                  </td>
                  <td class="text-center">
                    20
                  </td>
                  <td class="text-center">
                    15
                  </td>
                  <td class="text-center">
                    <img src="img/ico/bestiario_facil.gif" alt="">
                  </td>
                  <td>
                     <div class="text-truncate"><small><span class="font-weight-bold">Común:</span> 0-11 Gold Coins.</small></div>
                                    <div class="text-truncate"><small><span class="font-weight-bold">Incomún:</span> Worm.<br></small></div>
                                    <div style="min-width: 500px;">
                                        <small>
                                                <span class="font-weight-bold">Durante Eventos:</span> Bunch of Winterberries, Envelope from the Wizards, Fireworks Rocket, Party Hat, Party Trumpet, Snowball‎.
                                        </small>
                                    </div>
                  </td>
                </tr>

                <tr>
                  <td>
                      <a href="#">Bog Frog</a>
                  </td>
                  <td>
                    <img src="img/criature-sprite/Bog_Frog.gif" alt="">
                  </td>
                  <td class="text-center">
                    25
                  </td>
                  <td class="text-center">
                    0
                  </td>
                  <td class="text-center">
                    5
                  </td>
                  <td class="text-center">
                    <img src="img/ico/bestiario_facil.gif" alt="">
                  </td>
                  <td>
                    <small>Ninguno.</small>
                  </td>
                </tr>
               
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

1
  • 1
    text-truncate ya lo intenté, en pantallas pequeñas funciona a la perfección, sin embargo en pantallas de mayor tamaño se muestra el scrollbar. De momento se me ocurre mantener el text-truncate y ocultar el overflow-x mediante media query en pantallas de mayor tamaño... lo voy a intentar y comento. Saludos! y Gracias!
    – Nick Cam
    el 14 nov. 2020 a las 3:43
2

Encontré un ejemplo de la solución que tenia en mente y lo adapté a mi código. Funciona correctamente. En resoluciones mayores a 768px no genera el scrollbar-x pero en menor resolución sí lo hace, logrando así el efecto deseado y manteniendo el diseño visual impecable.

Dejaré el código e imagenes.

@media (max-width: 768px) {
  .specifictd {
    min-width: 650px; /* adjust to desired wrapping */
    display: table;
    word-wrap: break-word;
  }
}
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">Criatura</th>
              <th scope="col"> </th>
              <th scope="col">Hp</th>
              <th scope="col">Exp</th>
              <th scope="col">Charms</th>
              <th scope="col">Dificultad</th>
              <th scope="col">Loot</th>
            </tr>
          </thead>
          <tbody>

            <tr>
              <td>
                <a href="#">Azure Frog</a>
              </td>
              <td>
                <img src="img/criature-sprite/Azure_Frog.gif" alt="">
              </td>
              <td class="text-center">
                60
              </td>
              <td class="text-center">
                20
              </td>
              <td class="text-center">
                15
              </td>
              <td class="text-center">
                <img src="img/ico/bestiario_facil.gif" alt="">
              </td>
              <td>
                <div class="specifictd"><small><span class="font-weight-bold">Común:</span> 0-11 Gold Coins.</small></div>
                <div class="text-truncate"><small><span class="font-weight-bold">Incomún:</span> Worm.<br></small></div>
                <div style="min-width: 500px;">
                  <small>
                                                <span class="font-weight-bold">Durante Eventos:</span> Bunch of Winterberries, Envelope from the Wizards, Fireworks Rocket, Party Hat, Party Trumpet, Snowball‎.
                                        </small>
                </div>
              </td>
            </tr>

            <tr>
              <td>
                <a href="#">Bog Frog</a>
              </td>
              <td>
                <img src="img/criature-sprite/Bog_Frog.gif" alt="">
              </td>
              <td class="text-center">
                25
              </td>
              <td class="text-center">
                0
              </td>
              <td class="text-center">
                5
              </td>
              <td class="text-center">
                <img src="img/ico/bestiario_facil.gif" alt="">
              </td>
              <td>
                <small>Ninguno.</small>
              </td>
            </tr>

          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

Así se ve puesto en práctica:

Resolución mayor a 768px

Resolución menor a 768px

3
  • 1
    Que bien :), gracias por compartirlo. el 14 nov. 2020 a las 5:01
  • 1
    En realidad, no es necesario añadir más código ni crear reglas @media query. Puedes definir que sea responsiva la tabla sólo en determinadas resoluciones. Revisa este enlace getbootstrap.com/docs/4.5/content/tables/#responsive-tables el 24 nov. 2020 a las 16:16
  • Si, de hecho estoy trabajando específicamente con esas tablas que me enseñas y la clase .table-responsive, pero por alguna razón el scroll-x se quedaba "corto" y las partes con mayor contenido de texto se desplazaban hacia abajo como se observa en las 3 primeras imagenes de la publicacion. La solución inmediata fue agregar una hoja de estilos con las reglas @media query y poder ensanchar un poco cada contenedor que genera el "problema".
    – Nick Cam
    el 24 nov. 2020 a las 16:23

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.