0

como dice el título, estoy tratando de generar un scrollbar a la tabla, pero no está funcionando, pero si se está generando un scroll, pero a nivel página y no quiero eso porque se me está rompiendo toda la página.

Mi idea es mantener todo dentro de la tabla y que no se rompa.

    <div id="contenedor-tabla" class="w-full h-[50%]">
        <div class="w-full h-full flex flex-col items-center">
            <table class="w-[98%] h-[98%] text-md bg-white shadow-md table-fixed">
                <tbody class="w-[80%] h-[90%] overflow-y">
                    <tr class="border-b">
                        <th class="text-left p-3 px-5">Servico Salud</th>
                        ...
                    </tr>
                    <!-- Columnas dinamicas con data cargada desde Vue -->
                    <tr v-for="data in data_tabla" :key="data.id" class="border-b hover:bg-orange-100 bg-gray-100 overflow-y">
                        <td class="p-3 px-5"><input type="text" class="bg-transparent">${data.fields.servicio_salud}
                        </td>
                        ...
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
0

1 respuesta 1

0

Según la documentación debes poner tu tabla en un div con la clase overflow-x y el ancho requerido a cada columna, luego agregar la clase w-full a las clases de la tabla.

<div class='overflow-x'>
        <table class='table-auto overflow-scroll w-full'>
            <thead>
                <tr class='bg-gray-100'>
                    <th class='w-20 px-4 py-2'>ID</th>
                    <th class='px-4 py-2'>Name</th>
                    <th class='px-4 py-2'>Email</th>
<!-- Resto de la tabla -->

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.