Cómo forzar que la lista desplegable se desborde sobre el contenedor de la tabla.
Estoy atascado en cómo hacer que la lista desplegable desborde su contenedor, que en mi caso es una celda de tabla.
Aquí tienes el ejemplo:
let content = document.querySelector('.content');
let abs = document.querySelector('.dropdown');
content.addEventListener('click', function () {
abs.classList.toggle('is-hidden');
});
.wrapper {
width: 500px;
overflow-x: auto;
overflow-y: visible;
}
.content {
width: 1000px;
height: 150px;
}
.content td {
position: relative;
border: 1px solid #ccc;
}
.dropdown {
position: absolute;
background: green;
top: 30px;
left: 10px;
width: 100px;
height: 300px;
}
.is-hidden {
display: none;
}
<div class="wrapper">
<table class="content">
<tr>
<td></td>
<td><div class="dropdown"></div></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
El ejemplo mencionado anteriormente básicamente simula la clase .table-responsive de Bootstrap. Mi objetivo es hacer que el contenedor tenga desplazamiento horizontal, pero permitir que la lista desplegable desborde verticalmente. Sin embargo, a pesar de haber configurado overflow-y: visible, el contenedor siempre tiene desplazamiento vertical.
¿Se puede lograr esto de alguna manera?
¡Gracias!
davy.ai
Para hacer que el desplegable se desborde de su contenedor en este caso, puedes intentar establecer la propiedad
overflow: visible
en el elemento padretd
en lugar de la tabla. Modifica tu CSS de la siguiente manera:Esto permitirá que el desplegable se desborde del elemento
td
en lugar de su tabla padre y, así, evitará que el contenedor haga desplazamiento vertical.¡Espero que esto te sea de ayuda!