div débordement et css dynamique dimension horizontale

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

  •  21-08-2019
  •  | 
  •  

Question

J'ai une page web qui montre beaucoup de tableaux de données et chacune de ces tables doit être placé sur une ligne horizontale. J'ai raillé jusqu'à un exemple ci-dessous: 

<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>

Je rencontre des problèmes que la div intérieure enveloppe la table divs à moins que je le mettre à une grande largeur telle que 4000px. Y at-il un bon moyen de garder toutes les tables en ligne, même si elles dépassent la taille de la div externe avec juste css?

Était-ce utile?

La solution

Modifier à .inline{float: left;} .inline{display:inline-block;}

http://jsfiddle.net/QLe5r/

Autres conseils

Pour nous cette propriété: 

white-space:nowrap;

En effet, le flotteur: gauche sur divs « en ligne ». utilise plutôt l'affichage: inline-block, (et l'affichage. en ligne pour IE, je pense que Check).

Pourquoi diable avez-vous des tonnes de tables à l'intérieur des tonnes de divs?!? Ce défaites le but d'utiliser des tables pour les données sous forme de tableau ... lorsque vous faites des données sous forme de tableau, vous devez simplement utiliser les tables ... pas appliquer des combinaisons inutiles.

Il suffit d'utiliser une table et utiliser chaque fois que vous <td>stuff</td> avez plus de données à ajouter ... TD sont basés horizontale de toute façon si vous même pas à se soucier de l'avoir css extension.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top