title: maximum height/rows and set scroll
body: <p><strong>I have my table in my html php file inside my  i want it to be set the max height and if it reach the max and want to add more it will be scrollable how is this possible? this is for my project thanks</strong></p>
  
  <p>i want this to be scrollable after 500px reached </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container" style="max-height: 500px;width:600px;height:500px border:1px solid black"&gt;
  &lt;div class="panel panel-default" style= "max-height: 500px;"&gt;
      &lt;div class="panel-heading" align="center"&gt;
          &lt;img src="or.png" alt="or" style="width:200px;height:40px;"&gt;
      &lt;/div&gt;
      &lt;div class="panel-body" style= "max-height: 500px;"&gt;         
    &lt;table class="table"&gt;
  
    &lt;tr&gt;
  
  &lt;th&gt;&lt;FONT color="CB7F16"&gt;Foodname&lt;/FONT&gt;&lt;/th&gt;
  &lt;th&gt;&lt;FONT color="CB7F16"&gt;Quantity&lt;/FONT&gt;&lt;/th&gt;
  
  &lt;tr&gt;
  
  &lt;?php
  
  while($food=mysql_fetch_assoc($list)) {
  
    echo"&lt;tr&gt;";
    
    echo"&lt;td&gt;&lt;FONT color='FA9404'&gt;".$food['food']."&lt;/FONT&gt;&lt;/td&gt;";
    echo"&lt;td&gt;&lt;FONT color='FA9404'&gt;".$food['quantity']."&lt;/FONT&gt;&lt;/td&gt;";
    
    echo"&lt;/tr&gt;";
    
  }
  
  ?&gt;
    &lt;tr&gt;
      &lt;td colspan="2" align="center"&gt;&lt;a class="btn" href="acceptorder.php"&gt;Accept&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    
    &lt;/table&gt;
    &lt;/div&gt; 
    &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>