title: How to add scroll bar to my dynamic table?
body: <p>If I defined an empty table in my <strong><em>index.html</em></strong>:</p>
  
  <pre><code>&lt;body&gt;
  &lt;table width="800" border="0"  class="my-table"&gt;
       &lt;tr&gt;
       &lt;/tr&gt;
  
  &lt;/table&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Then, I add row and columns to <strong><em>my-table</em></strong> by invoke the following Javascript code:</p>
  
  <pre><code>var myTable = $('.my-table');
  
  var myArr=GET_FROM_SERVER //server returns an arry of object, myArr.length&gt;50
  
  for(var i=0; i&lt;myArr.length)
  myTable.append("&lt;tr id="+i+"&gt;"
                        +" &lt;td&gt;"+myArr[i].name+"&lt;/td&gt;"
                        +"&lt;td&gt;"+myArr[i].address+"&lt;/td&gt;"                  
             +"&lt;/tr&gt;");
  </code></pre>
  
  <p><code>myArr</code> is an array of object get from server, the length of this array could be more than 50. </p>
  
  <p>I got all of this working successfully, my question is, <strong>how can I add scroll bar
  to this table</strong> so that if there are too many rows, user could use scroll bar to check the table content.</p>