How to add scroll bar to my dynamic table?

Question

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.

Wicked Coder · Accepted Answer · 2011-06-14 14:38:44Z

16

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>

answered Jun 14, 2011 at 14:38

Wicked Coder

1,1186 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Codelearner Over a year ago

The approach you suggested is working fine in Firefox but for IE it is giving issue when there is a single row returned by the report query. At that time only the headers are getting shown in the HTML page and user have to unnecessarily scroll down to see the ONE record.

Coder17 Over a year ago

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

Spudley · Accepted Answer · 2011-06-14 14:46:29Z

3

The quick and easy answer is CSS overflow:scroll; on the parent element.

However, if you're trying to jazz up your tables, I'd suggest going one step further, and use a JQuery plugin like Fixed Table Header.

The nice thing about this is that it means you can scroll the table body while keeping the header in place, which makes it much easier to read when you've got large amounts of data.

You might also want a script that allows your users to click in the header and sort the table by different columns. In that case, FlexiGrid might be an even better option.

answered Jun 14, 2011 at 14:46

Spudley

169k39 gold badges240 silver badges309 bronze badges

Comments

bpeterson76 · Accepted Answer · 2011-06-14 14:41:16Z

From a UI standpoint, it's going to be easier to interact with a long table if it's paged, not scrolling. Scrolling can cause some behaviors that make it difficult for users with disabilities to interact. It's easy to click a next page link, not always so easy to scroll.

I attack table problems using a grid, and my grid of choice is DataTables. It gives you paging, filtering, sorting, ordering, and ajax loading of content along with the opportunity to scroll with a fixed header if you are determined to go this route. You can even setup a download to excel, pdf, printer, etc and style on the fly with just a couple of additions. All can be setup with a few simple lines of code. By far, it's the best, quickest trick I use to make complex data quickly available to my users.

habuniaa · Accepted Answer · 2019-04-16 14:29:20Z

0

if you want to see scroll only x position (horizantal) you can use style="overflow-x:scroll"

answered Apr 16, 2019 at 14:29

habuniaa

11 bronze badge

Collectives™ on Stack Overflow

How to add scroll bar to my dynamic table?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related