CODEWITHSUNDEEP
javascriptjquerycss-tables
maximus
maximus

Reputation: 4302

Table not working as intended with overflow:auto using jQuery

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)

Upvotes: 0

Views: 71

Answers (2)

painotpi
painotpi

Reputation: 6996

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

Upvotes: 1

Ali Shah Ahmed
Ali Shah Ahmed

Reputation: 3333

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

Upvotes: 0

Related Questions