Ma div ne restera pas dans mon conteneur div

Question

J'ai quelques divs dans une table et je veux faire un de mes divs pour qu'il ne sorte pas de la page. Je veux ajouter un parchemin sur le conteneur div. mais au contraire, je le div se poursuit encore de ma page:

<table style="width: 100%;"> 
    <tr> 
     <td> 
      //some stuff 
     </td> 
     <td> 
      <div id="container" style="overflow-x: scroll;"> 
       <div style="width: 1100px;"> div containing chart1 </div> 
       <div style="width: 1100px;"> div containing chart2 </div> 
      </div> 

     </td> 
    </tr> 
</table> 

JSFIDDLE

Answer 1

D'abord, se débarrasser de overflow-x:scroll sur le récipient. Ensuite, ajoutez un div supplémentaire à l'intérieur de chacun des divs que vous voulez faire défiler:

<div id="container"> 
    <div class="scroll"> 
     <div class="chart">div containing chart1</div> 
    </div> 
    <div class="scroll"> 
     <div class="chart">div containing chart2</div> 
    </div> 
</div> 

Vous pouvez maintenant donner la div « scroll » divs une largeur de tout (par exemple 200px) avec overflow-x:scroll et définissez les internes « graphique » de à width:1100px:

.scroll { 
    width:200px; 
    overflow-x:scroll; 
} 
.chart { 
    width:1100px; 
} 

Voici un jsFiddle

MISE à JOUR:

Tom a raison, vous pouvez appliquer une largeur en pourcentage à la div "scroll". Assurez-vous d'ajouter overflow:hidden à l'élément de corps, sinon la partie cachée de la table va déborder la page:

body{ 
    overflow:hidden; 
} 
.scroll { 
    width:20%; 
    overflow-x:scroll; 
} 

Mise à jour jsFiddle

Answer 2

Le problème est que la largeur que vous avez spécifié pour les cellules était beaucoup plus que nécessaire (mis à une valeur inférieure et aussi essayez d'utiliser des CSS pour spécifier la hauteur et la largeur de la table elle-même).

Ainsi, la largeur ici:

<div style="width: 1100px;"> div containing chart1 </div> 

devrait être moins, voici le violon mis à jour:

Updated Fiddle