Scroll Table with Html/CSS

Question

I have a table like this one:

enter image description here

What I want to do is to make it scrollabe after certing height or certain number of rows, keeping the header Bike - Car - Truck visible. I have made enough Google searches, seen other Stack Overflow posts like this one. I have tried the jsfiddle.net solution in the accepted answer of that post as well. But it makes my table looks like this:

enter image description here

Here is the link to my html code. It might seem untidy, I have just pasted table data to see if the scrolling works. This one is the tablestyle.css. I think the public.css file has nothing to do with this distortion. If it is important then I shall upload that as well. Any clues/helps are appreciated!

i think if you put your table inside a div and give that div a css class with fixed height and overflow:auto; will fix your issue — Sora
– Sora, Commented Jun 14, 2013 at 6:55
@Sora it worked but the scroll bar moved to far right where the browser scroll bar would be sitting :( — Taslim A. Khan
– Taslim A. Khan, Commented Jun 14, 2013 at 7:14

Community · Accepted Answer · 2017-05-23 10:32:45Z

4

I added the following css to fix it:

In HTML I wrapped the first tr with thead (not necessary, but recommended)

CSS:

table.list {
    width:100%;
}
table.list thead {
    display: table;
    float: left;
    width: 100%;
}
table.list thead th {
    text-align: center;
}
table.list tbody {
    float: left;
    width: 100%;
}
table.list tbody tr {
    display: table;
    width: 100%;
}
table.list th, td {
    width: 25%;
}

Working Fiddle

You may want to make this fix cross-browser. Then please go through this link.

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Jun 14, 2013 at 7:14

Mr_Green

42k48 gold badges171 silver badges277 bronze badges

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

3 Comments

Taslim A. Khan Over a year ago

Your solution works fine. I am just curious, since I will be inserting this table inside another table layout, so far I know, if we want to distinguish conflicting css elements, we use id/class. You have used just table {widht:100%;}, so will it conflict when I link other css files containing table ?

Mr_Green Over a year ago

@Pro.metal I don't think so. but it would be better if you give some class to the table in my above solution.

Mr_Green Over a year ago

@Pro.metal check my updated post. I am assuming the class would be .list here. (I have not updated the fiddle though) I hope you can understand it better now. :)

Roy Sonasish · Accepted Answer · 2013-06-14 07:20:23Z

2

try this

I have changed some of your css

tbody#scrolling { height: 120px; overflow-x: hidden; overflow-y:scroll; display: block;}
td#vehicles, th#vehicles {  border: 0 none; height: 30px; min-width:153px; }
thead{
    width:100%;
    display:block;
}

also added thead in the table

here is jsFiddle File

Also you have used one ID multiple time in you table, which is not a valid code. change it to class.

answered Jun 14, 2013 at 7:20

Roy Sonasish

4,60923 silver badges31 bronze badges

1 Comment

Taslim A. Khan Over a year ago

it works, but there's still a problem. if there are lesser number of rows, then the scroll bar is still there. Mr_Green solution doesn't have that problem. +1 for the solution :)

Collectives™ on Stack Overflow

Scroll Table with Html/CSS

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related