Explore our sites

Stack Exchange
tour help careers 2.0
Take the tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite
2

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 stackoverflow 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!

share|improve this question
 
Why the php tag? –  curious_coder Jun 14 at 6:55
 
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 at 6:55
 
look here stackoverflow.com/questions/16878941/… –  bksi Jun 14 at 6:57
 
@Sora it worked but the scroll bar moved to far right where the browser scroll bar would be sitting :( –  Pro.metal Jun 14 at 7:14
 
ID's are meant to be unique. use class instead. –  Mr_Green Jun 14 at 7:25
add comment

2 Answers

up vote 1 down vote accepted

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.

share|improve this answer
 
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 ? –  Pro.metal Jun 14 at 9: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 at 9: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 at 9:08
 
<table id="vehicletable" class="list"> am I right? –  Pro.metal Jun 14 at 9:17
 
@Pro.metal yes. –  Mr_Green Jun 14 at 9:29
add comment
up vote 2 down vote

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.

share|improve this answer
 
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 :) –  Pro.metal Jun 14 at 9:19
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.