Javascript – How to add scroll bar to the dynamic table


If I defined an empty table in my index.html:

<table width="800" border="0"  class="my-table">



Then, I add row and columns to my-table by invoke the following Javascript code:

var myTable = $('.my-table');

var myArr=GET_FROM_SERVER //server returns an arry of object, myArr.length>50

for(var i=0; i<myArr.length)
myTable.append("<tr id="+i+">"
                      +" <td>"+myArr[i].name+"</td>"

myArr is an array of object get from server, the length of this array could be more than 50.

I got all of this working successfully, my question is, how can I add scroll bar
to this table
so that if there are too many rows, user could use scroll bar to check the table content.

Best Solution

I would wrap the table with a div


 <div style="overflow:scroll;height:80px;width:100%;overflow:auto">

    <table width="800" border="0"  class="my-table">
    <tr>      </tr>