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, Jun 14 '13 at 06:55
look here http://stackoverflow.com/questions/16878941/two-tables-vertically-aligned-how-to-synchronise-the-widths-spacing — bksi, Jun 14 '13 at 06:57
@Sora it worked but the scroll bar moved to far right where the browser scroll bar would be sitting :( — Taslim A. Khan, Jun 14 '13 at 07:14

score 4 · Accepted Answer · edited May 23 '17 at 10:32

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 '17 at 10:32

Community

1
1

answered Jun 14 '13 at 07:14

Mr_Green

40,727
45
159
271

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 ? – Taslim A. Khan Jun 14 '13 at 09:04
@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 Jun 14 '13 at 09:06
1

@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. :) – Mr_Green Jun 14 '13 at 09:08

score 2 · Answer 2 · answered Jun 14 '13 at 07:20

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 '13 at 07:20

Roy Sonasish

4,571
20
31

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 :) – Taslim A. Khan Jun 14 '13 at 09:19

Scroll Table with Html/CSS

2 Answers2