html - style - Desplazamiento horizontal en rebosadero de mesa

required style css

Question

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 mesa y estoy teniendo 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 está trabajando en cómo solucionar este problema.

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

Answer 1

A menos que haya malinterpretado su pregunta, mueva overflow-x:scroll desde .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 tablas.

Answer 2

Creo que su desbordamiento debe 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/

Answer 3

En un sitio receptivo para móviles, todo se debe posicionar de manera absoluta en un div relativo. Y altura fija. Conjunto de consultas de medios para relevancia.

@media only screen and (max-width: 480px){
  .scroll-wrapper{
    position:absolute;
    overflow-x:scroll;
  }

Answer 4

   .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;}

Usted debe proporcionar desplazamiento en div.