Comment faire un scroll de cellule de table défini par CSS?

Question

Je veux pouvoir définir la hauteur de la table et forcer les cellules à défiler individuellement si elles sont plus grandes que la table.

Consultez le code suivant: (voir en action here)

<div style="display: table; position: absolute; 
    width: 25%; height: 80%; min-height: 80%; max-height: 80%; 
    left: 0%; top: 10%; right: 75%; bottom: 10%; border: solid 1px black;"> 
    <div style="display: table-row;"> 
     <div style="display: table-cell; border: solid 1px blue;"> 
      {Some dynamic text content}<br/> 
      This cell should shrink to fit its contents. 
     </div> 
    </div> 
    <div style="display: table-row;"> 
     <div style="display: table-cell; border: solid 1px red; 
      overflow: scroll;"> 
      This should only take up the remainder of the table's vertical space. 
      This should only take up the remainder of the table's vertical space. 
      This should only take up the remainder of the table's vertical space. 
      This should only take up the remainder of the table's vertical space. 
      This should only take up the remainder of the table's vertical space. 
      This should only take up the remainder of the table's vertical space. 
      This should only take up the remainder of the table's vertical space. 
      This should only take up the remainder of the table's vertical space. 
     </div> 
    </div> 
</div> 

Si vous ouvrez ce code (dans IE8, dans mon cas), vous remarquerez que la deuxième cellule s'inscrit dans la table bien quand le navigateur est maximisé. En théorie, lorsque vous réduisez le navigateur (obligeant la table à rétrécir également), une barre de défilement verticale doit apparaître à l'intérieur de la deuxième cellule lorsque la table devient trop petite pour contenir tout le contenu. Mais en réalité, la table croît verticalement, au-delà des limites définies par les attributs CSS height.

Espérons que je l'ai expliqué ce scénario suffisamment ...

Est-ce que quelqu'un sait comment je peux obtenir ce travail?

Answer 1

Une question très ancienne; mais toujours n ° 2 dans Google quand j'ai cherché le même sujet.

La solution simple que j'ai trouvé est d'envelopper le contenu du « besoin de faire défiler div » dans un autre div. Je ne sais pas pourquoi; mais les éléments avec "display: table-cell" ne défilent pas. Mais les éléments à l'intérieur d'eux peuvent. Alors mettez un div à l'intérieur et réglez-le pour faire défiler!

Answer 2

Pour obtenir ce comportement, vous devrez peut-être tout simplement éviter le modèle de table CSS, et créez votre propre écran de style table flottante, réglage de largeurs/hauteurs, etc.