it-swarm.dev

Desplazamiento horizontal en el desbordamiento de la mesa

Tengo una mesa básica en un contenedor. La tabla tendrá unas 25 columnas. Estoy tratando de agregar una barra de desplazamiento horizontal en el desbordamiento de la tabla y estoy pasando un momento realmente difícil.

Lo que está sucediendo ahora es que las celdas de la tabla están acomodando el contenido de las celdas ajustando automáticamente la altura de la celda y manteniendo un ancho de tabla fijo.

Agradezco cualquier sugerencia sobre por qué mi método no funciona para solucionarlo.

¡Muchas gracias de antemano!

CSS

.search-table-outter {margin-bottom:30px; }
.search-table{table-layout: fixed; margin:40px auto 0px auto;  overflow-x:scroll; }
.search-table, td, th{border-collapse:collapse; border:1px solid #777;}
th{padding:20px 7px; font-size:15px; color:#444; background:#66C2E0;}
td{padding:5px 10px; height:35px;}
tr:nth-child(even)  {background: #f5f5f5;}
tr:nth-child(odd)   {background: #FFF;}

HTML

<div class="search-table-outter wrapper">
    <table class="search-table inner">
        <tr>
            <th>Col1</th>
            <th>col2</th>
            <th>col3</th>
            <th>col4</th>
            <th>col5</th>
            <th>col5</th>
        </tr>
        <?php echo $rows; ?>
    </table>
</div>

JS Fiddle (Nota: si es posible, me gustaría que la barra de desplazamiento horizontal esté en el contenedor con el borde rojo): http://jsfiddle.net/ZXnqM/3/

52
AnchovyLegend

Creo que tu desbordamiento debería estar en el contenedor exterior. También puede establecer explícitamente un ancho mínimo para las columnas. Me gusta esto:

.search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }

Fiddle: http://jsfiddle.net/5WsEt/

99
mayabelle

A menos que haya entendido mal su pregunta, mueva overflow-x:scroll de .search-table a .search-table-outter.

http://jsfiddle.net/ZXnqM/4/

.search-table-outter {border:2px solid red; overflow-x:scroll;}
.search-table{table-layout: fixed; margin:40px auto 0px auto;   }

Por lo que sé, no puedes asignar barras de desplazamiento a las tablas.

6
TreeTree

Una solución que nadie mencionó es usar white-space: nowrap para la tabla y agregar _overflow-x_ al contenedor.

( http://jsfiddle.net/xc7jLuyx/11/ )

CSS

_.wrapper { overflow-x: auto; }
.wrapper table { white-space: nowrap }
_

HTML

_<div class="wrapper">
    <table></table>
</div>
_

Este es un escenario ideal si no desea filas con varias líneas. Para agregar líneas necesita usar _<br/>_ .

1
The.Bear
   .search-table-outter {border:2px solid red; overflow-x:scroll;}
   .search-table{table-layout: fixed; margin:40px auto 0px auto;   }
   .search-table, td, th{border-collapse:collapse; border:1px solid #777;}
   th{padding:20px 7px; font-size:15px; color:#444; background:#66C2E0;}
   td{padding:5px 10px; height:35px;}

Debe proporcionar desplazamiento en div.

0
surbhi bakshi