css div overflow et taille horizontale dynamique

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

<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 enveloppements la table divs à moins que je le mettre à une grande largeur telle que 4000px. Y a-t-il une bonne façon de garder toutes les tables en ligne même si elles dépassent la taille de la div externe avec juste css?

Source

2009-03-20 bobwah

Vous allez devoir donner d'autres exemples ici. Quel est le div interne dont vous parlez? Quels sont "les objets"? – Welbog

J'ai essayé de rendre cela plus clair. – bobwah

Est-ce que c'est juste quand les «trucs» sont exceptionnellement longs, ou toujours emballés? –

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

http://jsfiddle.net/QLe5r/

Source

2012-03-23 19:17:21

-nous cette propriété:

white-space:nowrap;

Source

2009-03-20 17:07:24

ouais j'ai essayé mais ils enveloppent encore. Je ne sais pas si j'ai fait en sorte que tous les divs qui contiennent des tables soient en ligne, donc je vais essayer rapidement et voir si ça aide. – bobwah

Vous avez besoin de poster un code? "White-space: nowrap" fonctionne pour moi. – bobince

Solution ne fonctionnant pas – Andy

-2

Pourquoi diable avez-vous des tonnes de tables à l'intérieur des tonnes de divs?!? Cela va à l'encontre du but de l'utilisation de tables pour les données tabulaires ... lorsque vous utilisez des tableaux de données, vous devez simplement utiliser des tableaux ... sans appliquer de combinaisons inutiles.

Il suffit d'utiliser une table et d'utiliser <td>stuff</td> chaque fois que vous avez plus de données à ajouter ... td sont à base horizontale de toute façon, vous n'aurez même pas besoin de css pour l'étendre.

Source

2009-06-06 00:54:23

Je créais des racks de serveur et affichant une rangée entière de serveurs. Je suppose que ceux-ci devraient tous être des données div mais j'avais construit l'original (montrant un à la fois) en utilisant des tables pour la facilité. – bobwah

C'est parce que le flottant: à gauche sur divs "inline". A la place utilise display: inline-block, (et display: inline pour IE, je pense.

Source

2011-02-23 16:26:22 Javanight

fonctionne dans firefox mais pas dans IE et c'était pour IE6 - était il y a près de deux ans mais si pas trop inquiet à ce sujet;) – bobwah

css div overflow et taille horizontale dynamique

Répondre

Questions connexes