div con desplazamiento horizontal solo

Tengo un DIV de ancho fijo que contiene una tabla con muchas columnas, y necesito permitir al usuario desplazar la tabla horizontalmente dentro del DIV.div con desplazamiento horizontal solo

Esto necesita funcionar solo en IE6 e IE7 (aplicación cliente interna).

las siguientes obras en Internet Explorer 7:

overflow-x: scroll;

¿Alguien puede ayudar con una solución que funciona en IE6 así?

Fuente

2009-01-14 Richard Everett

La propiedad overflow-x debería funcionar bien en IE6; puedes tener factores complicados ¿Puedes publicar un caso de prueba que muestre el problema? –

Parece que mi problema está en otra parte: mi contenido DIV se está desbordando en su contenedor. –

La solución es bastante sencilla. Para garantizar que no afecte el ancho de las celdas de la tabla, desactivaremos espacios en blanco. Para asegurarnos de obtener una barra de desplazamiento horizontal, activaremos overflow-x. Y eso es prácticamente todo:

.container { 
    width: 30em; 
    overflow-x: auto; 
    white-space: nowrap; 
}

Se puede ver the end-result here, o en la animación debajo. Si la tabla determina la altura de su contenedor, no debería necesitar establecer explícitamente overflow-y en hidden. Pero entiende que también es una opción.

Fuente

2009-01-14 16:43:21 Sampson

Me faltaba el 'espacio en blanco: nowrap;'. ¡Funciona de maravilla! – AndreFeijo

Si una imagen vale más que mil palabras, un gif vale un millón. – HoldOffHunger

overflow-x: scroll; 
overflow-y: hidden;

EDIT:

funciona para mí:

<div style='overflow-x:scroll;overflow-y:hidden;width:250px;height:200px'> 
    <div style='width:400px;height:250px'></div> 
</div>

Fuente

2009-01-14 16:49:32

no pude conseguir la respuesta seleccionada para trabajar, pero después de un poco de research, me encontré con que el desplazamiento horizontal div debe tener white-space: nowrap en el CSS.

Aquí es completa código de trabajo:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Something</title> 
    <style type="text/css"> 
     #scrolly{ 
      width: 1000px; 
      height: 190px; 
      overflow: auto; 
      overflow-y: hidden; 
      margin: 0 auto; 
      white-space: nowrap 
     } 

     img{ 
      width: 300px; 
      height: 150px; 
      margin: 20px 10px; 
      display: inline; 
     } 
    </style> 
</head> 
<body> 
    <div id='scrolly'> 
     <img src='img/car.jpg'></img> 
     <img src='img/car.jpg'></img> 
     <img src='img/car.jpg'></img> 
     <img src='img/car.jpg'></img> 
     <img src='img/car.jpg'></img> 
     <img src='img/car.jpg'></img> 
    </div> 
</body> 
</html>

Fuente

2013-03-03 18:46:25

mejor respuesta aquí 'white-space: nowrap' gracias! – oak

La sugerencia de "espacio en blanco: nowrap" aquí parece haberse mezclado en la respuesta correcta. +1 para mejorar la respuesta aceptada. – HoldOffHunger

de desplazamiento horizontal mantienen estas dos propiedades en mente:

overflow-x:scroll; 
white-space: nowrap;

Ver vínculo de trabajo: click me

HTML

<p>overflow:scroll</p> 
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.You can use the overflow property when you want  to have better control of the layout. The default value is visible.</div>

CSS

div.scroll 
{ 
background-color:#00FFFF; 
height:40px; 
overflow-x:scroll; 
white-space: nowrap; 
}

Fuente

2014-07-30 09:10:29 ankitd

div con desplazamiento horizontal solo

Respuesta

Cuestiones relacionadas