CODEWITHSUNDEEP
htmlcssscrollhtml-table
Taslim A. Khan
Taslim A. Khan

Reputation: 526

Scroll Table with Html/CSS

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!

Upvotes: 2

Views: 6400

Answers (2)

Mr_Green
Mr_Green

Reputation: 41822

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.

Upvotes: 4

Roy Sonasish
Roy Sonasish

Reputation: 4599

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.

Upvotes: 2

Related Questions