-1

Tengo deshabilitado el scroll lateral para toda una aplicación:

    <div style="overflow-x: hidden;">
        <?= $this->include('menu'); ?>
        <?= $this->renderSection('contenido') ?>
    </div> 

Y quiero que se habilite solo para un elemento table cuando se supere el ancho de pantalla disponible:

<table id="table" class="table table-striped table-hover" style="overflow-x: auto;">

No consigo que funcione este scroll lateral para este elemento table, aun cuando no cabe toda la información de la tabla en la pantalla.

Se agradece la ayuda.

3
  • Hola Jota, ¿podrías editar tu pregunta e incluir un ejemplo mínimo verificable? Porque la respuesta que recibiste debería funcionar
    – Marcos
    Commented el 8 ago. a las 11:42
  • Hola Marcos, perdona que sea tan escueto, pero es que no hay mucho mas. El caso es que en pantalla va bien, pero en dispositivos móviles no. Y no hay mas estilos aplicados. Gracias
    – Jota
    Commented el 9 ago. a las 12:14
  • Hola Jota, si en móviles no te funciona, es probable que se deba a que se están aplicando otros estilos. Esta situación sería bueno que la aclares, de lo contrario se vuelve difícil determinar el porqué no te funciona.
    – Marcos
    Commented el 9 ago. a las 12:55

1 respuesta 1

2

Las tablas no soportan la propiedad overflow, pero puedes conseguirlo del siguiente modo:

  1. Puedes deshabilitar el scroll de tu aplicación en horizontal.
  2. Dentro del 'div' inserta tu table y aplica la propiedad overflow-x: auto; a este contenedor.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabla con Scroll Horizontal</title>
    <style>
        /* Deshabilita el scroll lateral global */
        .main-container {
            overflow-x: hidden;
        }

        /* Contenedor de la tabla con scroll horizontal */
        .table-container {
            overflow-x: auto;  /* Permite el scroll horizontal */
            max-width: 100%;   /* Limita el ancho máximo del contenedor */
            margin: 0 auto;    /* Centra el contenedor horizontalmente */
        }

        /* Asegura que la tabla tenga un ancho fijo que pueda superar el contenedor */
        table {
            width: 1000px; /* Ancho fijo mayor al de la pantalla para forzar el scroll */
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }

        th {
            background-color: #f2f2f2;
            text-align: left;
        }
    </style>
</head>
<body>

<div class="main-container">
    <!-- Menú y otras secciones de la aplicación -->
    <div>
        <p>Menú o contenido adicional aquí</p>
    </div>

    <div class="table-container">
        <table id="table" class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>Columna 1</th>
                    <th>Columna 2</th>
                    <th>Columna 3</th>
                    <th>Columna 4</th>
                    <th>Columna 5</th>
                    <th>Columna 6</th>
                    <th>Columna 7</th>
                    <!-- Agrega más columnas si ves necesario -->
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Dato 1</td>
                    <td>Dato 2</td>
                    <td>Dato 3</td>
                    <td>Dato 4</td>
                    <td>Dato 5</td>
                    <td>Dato 6</td>
                    <td>Dato 7</td>
                    <!-- Agrega más datos si quieres.... -->
                </tr>
                <tr>
                    <td>Dato 1</td>
                    <td>Dato 2</td>
                    <td>Dato 3</td>
                    <td>Dato 4</td>
                    <td>Dato 5</td>
                    <td>Dato 6</td>
                    <td>Dato 7</td>
                </tr>
                <!-- Agrega más filas -->
            </tbody>
        </table>
    </div>
</div>

</body>
</html>

3
  • ok gracias. Ya lo había hecho pero no funciona.
    – Jota
    Commented el 8 ago. a las 10:16
  • @Jota Afirmar que "no funciona" cuando su ejemplo lo ejecutas y claramente funciona... es raro, no?? Claramente algo no hiciste bien si afirmas que no te funcionó, porque efectivamente es como se hace normalmente puesto que las tablas no tienen overflow como tal
    – Benito-B
    Commented el 9 ago. a las 8:57
  • Ok, disculpa. No me funciona a mí solo con poner un container antes de la tabla y ahi habilitar el scroll. Tu ejemplo sí funciona perfectamente.
    – Jota
    Commented el 9 ago. a las 12:11

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.