Desplazamiento horizontal sobre el desbordamiento de la tabla

Tengo una tabla 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 mesa y estoy teniendo un momento muy 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 está funcionando sobre cómo solucionar esto.

Muchas gracias en ¡avancen!

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 estuviera en el contenedor con el borde rojo): http://jsfiddle.net/ZXnqM/3 /

Author: AnchovyLegend, 2013-11-05
Source

4 answers

Creo que su desbordamiento debe estar en el contenedor exterior. También puede establecer explícitamente un ancho mínimo para las columnas. Así: 

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

Violín: http://jsfiddle.net/5WsEt/

 86
Author: mayabelle,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-05 16:50:48

A menos que malinterprete 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 se pueden dar barras de desplazamiento a las propias tablas.

 6
Author: TreeTree,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-05 16:49:15 
   .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
Author: surbhi bakshi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-13 08:57:48

En un sitio responsivo para móviles todo el asunto tiene que ser posicionado absoluto en un div relativo. Y altura fija. Media Query set para relevancia.

@media only screen and (max-width: 480px){
  .scroll-wrapper{
    position:absolute;
    overflow-x:scroll;
  }
 -1
Author: user2323922,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-24 14:02:29