css div desbordamiento y el tamaño horizontal dinámico

StackOverflow https://stackoverflow.com/questions/667023

  •  21-08-2019
  •  | 
  •  

Pregunta

Tengo una página web que muestra una gran cantidad de datos de tabla y cada una de estas tablas tiene que ser colocado en una línea horizontal. Me he burlado hasta un ejemplo a continuación: 

<html>
<style>
  .outer{width:300px;height:300px;overflow: scroll;}
  .inner{white-space: nowrap;}
  .inline{float: left;}
</style>
<body>
<div class="outer">
    <div class="inner">
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
        <div class="inline"><table><tr><td>stuff</td></tr></table></div>
    </div>
</div>
</body>
</html>

Tengo problemas para que el div interior envuelve los divs de mesa a menos que configurarlo para que tenga una gran anchura como 4000px. ¿Hay una buena manera de mantener todas las tablas en línea, incluso si exceden el tamaño de la div exterior con sólo CSS?

¿Fue útil?

Solución

Cambiar .inline{float: left;} a .inline{display:inline-block;}

http://jsfiddle.net/QLe5r/

Otros consejos

nosotros esta propiedad: 

white-space:nowrap;

Esto se debe a que el flotador: la izquierda en divs "en línea". En su lugar utiliza display: inline-block, (y la pantalla:. En línea para IE, creo Check).

¿Por qué en la tierra que tiene un montón de mesas en el interior de toneladas de divs?!? Que contradice el objetivo de utilizar tablas para datos tabulares ... cuando usted está haciendo datos tabulares que sólo debe utilizar las tablas ... No aplicar combinaciones inútiles.

Sólo tiene que utilizar una tabla y utilizar <td>stuff</td> cada vez que tenga más datos para agregar ... de TD se basan horizontal de todas formas por lo que ni siquiera tienen que molestarse con css para que se extienda.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top