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:
Alguien sabe como prodria hacer un collapse
? y que se vera asi:
table-responsive
y que ese div encierre todo el table... ah y también quita eltable-responsive
del table, me avisas.