0

Tengo un pequeño inconveniente con una tabla que me muestra unos datos almacenados en la base de datos, una vez que tengo cargado muchos registros la tabla se sale de control.

Mi idea es que la tabla tenga un scroll vertical, pero no se como ponerlo, probe con esto, pero no funciona:

style="height: 200px; overflow-y: auto;"

muestro como me quedaintroducir la descripción de la imagen aquí

desde ya, Muchas gracias a todos!!

5
  • 1
    Intenta ponerle ese style al contenedor donde esta tu datatable y ponle max-height no height el 15 oct. 2018 a las 13:59
  • 1
    En lugar de auto usa scroll. Y en todo caso en el inspector fijate si no hay otra regla que lo esté anulando.
    – Juan
    el 15 oct. 2018 a las 14:22
  • 1
    Esa modal es de bootstrap? el 15 oct. 2018 a las 14:27
  • Gracias por sus comentarios, probare sus recomendaciones, avisare los resultados.
    – Diego Arce
    el 15 oct. 2018 a las 14:38
  • David, el modal que uso es de bootstrap.
    – Diego Arce
    el 15 oct. 2018 a las 14:38

2 respuestas 2

2

solo funcionan en ie9+, Chrome 34+, Firefox 19+, Safari 7+, Android 4.4+ y iOS 6+

style="max-height: calc(100vh - 210px);overflow-y: auto";

no se si estas usando boostrap te recomiendo que le agregues paginadores y que lo ordenes alfabéticamente.

Un saludo

2
  • Muchas gracias, lo probare
    – Diego Arce
    el 15 oct. 2018 a las 14:38
  • Copiando el codigo asi no me funciono, le agregue Style= "display: block". con eso funciono, pero un poco angosto. Muchas gracias
    – Diego Arce
    el 15 oct. 2018 a las 14:49
1

Solo debes de colocar los siguientes propiedades CSS al selector .modal-body así:

.modal-body{
  max-height:150px;
  overflow:auto;
}

.modal-body{
  max-height:150px;
  overflow:auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
        <p>Modal body text goes here.</p>
        <p>Modal body text goes here.</p>
        <p>Modal body text goes here.</p>
        <p>Modal body text goes here.</p>
        <p>Modal body text goes here.</p>
        <p>Modal body text goes here.</p>
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

3
  • Lo probare David, gracias
    – Diego Arce
    el 15 oct. 2018 a las 14:53
  • @DiegoArce te sirvio? el 15 oct. 2018 a las 18:07
  • La verdad no me sirvio David, le agregue esto a la etiqueta y asi logre que funcione. style=" display: block; max-height: calc(100vh - 210px);overflow-y: auto";
    – Diego Arce
    el 16 oct. 2018 a las 0:28

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.