Wie kann ich dieses div scroll mit display: table?

Question

Ich habe dieses Beispiel:

link

HTML-Code:

<div id="wrap"> 
    <div id="scrollable"> 
    <table class="table"> 
    <thead> 
     <tr> 
     <th>Firstname</th> 
     <th>Lastname</th> 
     <th>Email</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>John</td> 
     <td>Doe</td> 
     <td>john@example.com</td> 
     </tr> 
     <tr> 
     <td>Mary</td> 
     <td>Moe</td> 
     <td>mary@example.com</td> 
     </tr> 
     <tr> 
     <td>July</td> 
     <td>Dooley</td> 
     <td>july@example.com</td> 
     </tr> 
    </tbody> 
    </table> 
    </div> 
</div> 

CODE CSS:

#wrap{ 
    display:table; //Here is the problem 
    background: #F7F7F7; 
} 
#scrollable{ 
    overflow-y:auto; 
} 
table{ 
    min-width:1000px; 
} 

Wenn Sie erhalten "display: table", wenn alles funktioniert einwandfrei, aber ich nicht wa Ich will ihn nicht aufgeben.

Ich möchte Scroll-Tabelle machen.

Es kann dies tun? Practicaly möchte ich #scrollable div bewegen haben, aber ohne die "display: table"

Cancelling Können Sie mir eine Lösung für dieses Problem zu finden bitte helfen?

Vielen Dank!

Answer 1

Bitte versuchen Sie dies:

etwas Höhe Erwähnung für #scrollable

wie

#scrollable{ 
    overflow-y:auto; 
height:100px 
} 

Answer 2

dieses CSS hinzufügen:

table{ 
    min-width:1000px; 
    overflow-y:scroll; 
    height:50px; 
    display:block; 
} 

Für Horizontal:

table{ 
    width:100px; 
    overflow-y:scroll; 
    display:block; 
} 

Demo

Answer 3

Sie können zur Steuerung des Überlaufes mit dem Wrapper betrachten und Anzeige gelten: Tabelle nur auf den Tisch Element.

Beispiel unten.

#wrap { 
 
    height: 100px; 
 
    width: 450px; 
 
    background: #F7F7F7; 
 
    overflow-y: scroll; // make the wrapper scrollable 
 
    overflow-x: none; 
 
} 
 

 
#table { 
 
    display: table; // apply table layout 
 
}

<div id="wrap"> 
 
    <div id="scrollable"> 
 
    <table class="table"> 
 
     <thead> 
 
     <tr> 
 
      <th>Firstname</th> 
 
      <th>Lastname</th> 
 
      <th>Email</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>John</td> 
 
      <td>Doe</td> 
 
      <td>john@example.com</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Mary</td> 
 
      <td>Moe</td> 
 
      <td>mary@example.com</td> 
 
     </tr> 
 
     <tr> 
 
      <td>July</td> 
 
      <td>Dooley</td> 
 
      <td>july@example.com</td> 
 
     </tr> 
 
     <tr> 
 
      <td>July</td> 
 
      <td>Dooley</td> 
 
      <td>july@example.com</td> 
 
     </tr> 
 
     <tr> 
 
      <td>July</td> 
 
      <td>Dooley</td> 
 
      <td>july@example.com</td> 
 
     </tr> 
 
     <tr> 
 
      <td>July</td> 
 
      <td>Dooley</td> 
 
      <td>july@example.com</td> 
 
     </tr> 
 
     <tr> 
 
      <td>July</td> 
 
      <td>Dooley</td> 
 
      <td>july@example.com</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>