Table not working as intended with overflow:auto using jQuery

Question

Here is the table I have made : JSFiddle link

At first it was working well but I wanted to add the scroll on the left because table had a lot of rows. In order to do it I have set the overflow:auto to the tbody in the CSS. It didn't work. Then I added

#training_table thead, #training_table tbody {
    display:block;
}

After that it worked, there is a scrollbar however as you see on the link all the rows are compressed. Now I can't make them to look correctly. What was my mistake?

EDIT: the head of the table shouldn't go up when scrolling. (should be always visible)

can you fix your fiddle, see only 2 rows (pitchers and batters), and the text is white. — painotpi
– painotpi, Commented Jun 24, 2013 at 6:34
@badZoke I have just updated and edited the link, click to it once more please — maximus
– maximus, Commented Jun 24, 2013 at 6:34

painotpi · Accepted Answer · 2013-06-24 06:47:17Z

1

Remove the display: block; from #training_table thead, #training_table tbody

And add these to #training_table,

height: 200px; // or whatever your limit is
display: table-cell;
overflow-y: scroll; //as per your preference 
overflow-x: hidden; //as per your preference

Test Link -- full screen

Test Link -- fiddle

answered Jun 24, 2013 at 6:47

painotpi

7,0122 gold badges40 silver badges72 bronze badges

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

1 Comment

maximus Over a year ago

I see, but the table head goes up when scrolling too. I need it to stay always on top even if scrolling.

Ali Shah Ahmed · Accepted Answer · 2013-06-24 06:34:54Z

0

Just make the following change to the css and it will work fine:
Replace display: block; with display: block inline;

answered Jun 24, 2013 at 6:34

Ali Shah Ahmed

3,3533 gold badges26 silver badges22 bronze badges

3 Comments

maximus Over a year ago

Then the overflow:auto is not making effect: no scrollbar appears.

Ali Shah Ahmed Over a year ago

i tried this in your fiddle and its working fine there. I just updated #training_table thead, #training_table tbody rule.

Ali Shah Ahmed Over a year ago

well i don't know why you cant see the scroll bar there. By the way i tested this in chrome.

Collectives™ on Stack Overflow

Table not working as intended with overflow:auto using jQuery

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related