Javascript – How to add scroll bar to the dynamic table

csshtmljavascriptjquery

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

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

</table>

</body>

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>"
                      +"<td>"+myArr[i].address+"</td>"                  
           +"</tr>");

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 Answer

I would wrap the table with a div

<body> 

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

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

 </div>

</body>