-1

estoy tratando de hacer que una tabla usando Bootstrap 4, me quede responsive. Me funciona perfecto en dispositivos grantes, el problema es cuando empiezo a achicarlos, especialmente en los tamaños de dispositivos moviles, que la tabla sale fuera de la columna. Les muestro mi codigo:

<section>
<div class="row">
    <div class="col-md-12 mx-auto">
        <div class="card card-signin my-5">
            <div class="card-body text-center">
                <h5 class="card-title display-55">Gestionar categorias</h5>
                <hr class="bg-primary" />
                <table class="table table-hover table-bordered">
                    <thead class="thead-dark">
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Nombre</th>
                            <th scope="col">Descripcion</th>
                            <th scope="col">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model.Where(x => x.Activo))
                        {
                            <tr>
                                <th scope="row">@item.Id</th>
                                <td>@item.Nombre</td>
                                <td>@item.Descripcion</td>
                                <td>
                                    @Html.ActionLink("Editar", "Edit", new { id = item.Id }) |
                                    @Html.ActionLink("Detalle", "Details", new { id = item.Id }) |
                                    @Html.ActionLink("Eliminar", "Delete", new { id = item.Id }, new { @class = "aElimina" })
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Alguna sugerencia de como poder arrelgarlo? Estoy arrancando en front end y me cuesta un poco esto. Gracias.

3 respuestas 3

4

Prueba añadiendo un contenedor table-responsive que contenga tu tabla, de esa manera en el caso que la tabla sea mas ancha que la columna quedara dentro de su contenedor sin salirse de la columna.

En tu codigo quedaria asi:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<section>
  <div class="row">
    <div class="col-md-12 mx-auto">
      <div class="card card-signin my-5">
        <div class="card-body text-center">
          <h5 class="card-title display-55">Gestionar categorias</h5>
          <hr class="bg-primary" />
          <div class="table-responsive">
            <table class="table table-hover table-bordered">
              <thead class="thead-dark">
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Nombre</th>
                  <th scope="col">Descripcion</th>
                  <th scope="col">Acciones</th>
                </tr>
              </thead>
              <tbody>
                @foreach (var item in Model.Where(x => x.Activo))
                {
                <tr>
                  <th scope="row">@item.Id</th>
                  <td>@item.Nombre</td>
                  <td>@item.Descripcion</td>
                  <td>
                    @Html.ActionLink("Editar", "Edit", new { id = item.Id }) |
                    @Html.ActionLink("Detalle", "Details", new { id = item.Id }) |
                    @Html.ActionLink("Eliminar", "Delete", new { id = item.Id }, new { @class = "aElimina" })
                  </td>
                </tr>
                }
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

1

A la tabla de tu código le falta que esté dentro de un elemento <div> con la clase table-responsive.

<div class="table-responsive">
    <!-- Tabla --> 
    <table class="table table-hover table-bordered">
        <!-- Cabecera y cuerpo de tu tabla --> 
    </table>
</div>

En el caso de tu código quedaría parecido al snippet que viene a continuación. Para efectos de que el snippet se vea bien, simplifiqué un poco tu código dejando tu @foreach comentado.

Para que se vea mejor la responsividad de la tabla, te recomiendo que pruebes el snippet a página completa.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<section>
  <div class="row">
    <div class="col-md-12 mx-auto">
      <div class="card card-signin my-5">
        <div class="card-body text-center">
          <h5 class="card-title display-55">Gestionar categorias</h5>
          <hr class="bg-primary" />
          <!-- Contenedor de la tabla -->
          <div class="table-responsive">
            <!-- Tabla -->
            <table class="table table-hover table-bordered">
              <thead class="thead-dark">
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Nombre</th>
                  <th scope="col">Descripcion</th>
                  <th scope="col">Acciones</th>
                </tr>
              </thead>
              <tbody>
                <!-- 
                @foreach (var item in Model.Where(x => x.Activo))
                {
                -->
                <tr>
                  <th scope="row">@item.Id</th>
                  <td>@item.Nombre</td>
                  <td>@item.Descripcion</td>
                  <td>
                    @Html.ActionLink("Editar", "Edit", new { id = item.Id }) | @Html.ActionLink("Detalle", "Details", new { id = item.Id }) | @Html.ActionLink("Eliminar", "Delete", new { id = item.Id }, new { @class = "aElimina" })
                  </td>
                </tr>
                <!-- 
                } 
                -->
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Extra: Tablas responsivas hasta cierto tamaño de pantalla

Ya que estás usando Bootstrap 4, y estás lidiando con tamaños de dispositivos móviles, también se pueden usar clases table-responsive-(tamaño), de modo que la responsividad de tu tabla sea hasta cierto tamaño:

.table-responsive{-sm|-md|-lg|-xl}

Por ejemplo, si quieres que la responsividad de tu tabla deje de correr para pantallas de tamaño lg, o sea, pantallas desde 992px de ancho en adelante (aquí tienes la tabla completa de tamaños del sistema de grilla en Bootstrap 4), tu tabla tiene que estar dentro de un elemento <div> con la clase table-responsive-lg:

<div class="table-responsive-lg">
    <table class="table table-hover table-bordered">
        <!-- Cabecera y cuerpo de tu tabla -->
    </table>
</div>

Ver también: Responsive tables (Documentación de Bootstrap 4) (en inglés)

1
  • Excelente explicacion y funciono perfecto. Muchas gracias por la respuesta y por los demas tips! Un genio
    – iMSn20
    el 6 sep. 2019 a las 14:30
0

estas usando unicamente "col-md-12" bootstrap posee clases para dar medidas segun cada resolucion "col-xs-12" o "col-lg-12", agrega varias no solo "-md-" (md, xs, lg), puedes obtener mas informacion sobre las grid especificamente en pagina W3School - Bootstrap 4 Grid System

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.