1

espero me puedan apoyar con el problema que tengo, tengo una tabla la cual en cierto px cuando se reduce la pantalla se sale de mi elemento card y ya trate con la propiedad table-responsive, pero no me dio resultado.

<div class="card">
<div class="card-header">Vacantes</div>
<div class="card-body">
    <a asp-action="Crear" class="btn btn-success btn-sm">Crear nuevo</a>
    <p class="card-text">En este apartado vas a poder dar de alta nuevos procesos de vacante.</p>

    <table class="table table-hover table-responsive" id="tablaVacantes">
        <thead>
            <tr>
                <th>FechaInicio</th>
                <th>Plaza</th>
                <th>Entrevistador</th>
                <th>Departamento</th>
                <th>Puesto</th>
                <th>Estatus</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            @foreach(var vacante in Model)
            {
                <tr>
                    <td>@vacante.FechaInicio</td>
                    <td>@vacante.NombrePlaza</td>
                    <td>@vacante.NombreEntrevistador</td>
                    <td>@vacante.NombreDepartamento</td>
                    <td>@vacante.NombrePuesto</td>
                    <td>@vacante.NombreEstatus</td>
                    <td>
                        <a class="btn btn-warning btn-sm" asp-action="Editar" asp-route-idVacante="@vacante.IdVacante"><i class="bi bi-pencil-square"></i></a>
                        <a class="btn btn-danger btn-sm" asp-action="Borrar" asp-route-idVacante="@vacante.IdVacante"><i class="bi bi-trash"></i></a>
                    </td>
                </tr>
            }
        </tbody>
    </table>

</div>

Este es mi html y se ve asi:

introducir la descripción de la imagen aquí

Alguien sabe como prodria hacer un collapse? y que se vera asi: introducir la descripción de la imagen aquí

3
  • encima de tu etiqueta table, crea un div con la clase table-responsive y que ese div encierre todo el table... ah y también quita el table-responsive del table, me avisas. el 10 ene. a las 22:30
  • 1
    Muchas gracias por tu ayuda Cris.
    – Hectorepg
    el 10 ene. a las 22:39
  • A usted, saludos. el 10 ene. a las 22:40

1 respuesta 1

1

A tu table le podrías dar las siguientes propiedades:

.table {
   display: block !important;
   overflow-x: auto !important;
   width: 100% !important;
 }

Otra alternativa es que crees una etiqueta div encima del table, que ese div tenga la propiedad table-responsive y que encierre a todo el table, quedando de la siguiente forma:

<div class="table-responsive">
  <table class="table table-hover" id="tablaVacantes">
    //...
  </table>
</div>

Puedes checar la documentación acerca de esto.

Tu Respuesta

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

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