Richard JP Le Guen has kindly provided me with help when it comes to creating a html scrollable table. The only problem is that I don't want the table headers to scroll with the rows of the table. Now he worked in his example using a range, but if I use it in my table, it will really mess up my headers in the table. I’ve been trying to figure it out for the last two hours, but I didn’t have it so that I just left the table headers as it was.
So, what is the question, is there another way to use css to make sure the table headers cannot be scrolled while scrolling down the table?
Below is the html and css code:
<div id="tableWrapper"> <div id="tableScroll"> <table border=1 id="qandatbl" align="center"> <thead> <tr> <th class="col1">Question No</th> <th class="col2">Option Type</th> <th class="col1">Duration</th> <th class="col2">Weight(%)</th> <th class="col1">Answer</th> <th class="col2">Video</th> <th class="col1">Audio</th> <th class="col2">Image</th> </tr> </thead> <tbody> <tr> <td class="qid"><?php echo $i; ?></td> <td class="options"></td> <td class="duration"></td> <td class="weight"></td> <td class="answer"></td> <td class="video"></td> <td class="audio"></td> <td class="image"></td> </tr> </tbody> </table> </div> </div> #qandatbl{ font-size:12px; border-collapse:collapse; margin:0px; text-align:center; margin-left:auto; margin-right:auto; border:1px solid black; } .col1{ background-color:#FCF6CF; } .col2{ background-color:#FEFEF2; } .options{ overflow:hidden; max-width:125px; min-width:125px; background-color:#FCF6CF; border:1px solid black; } .duration{ overflow:hidden; max-width:125px; min-width:125px; background-color:#FEFEF2; border:1px solid black; } .weight{ overflow:hidden; max-width:125px; min-width:125px; background-color:#FCF6CF; border:1px solid black; } .answer{ overflow:hidden; max-width:125px; min-width:125px; background-color:#FEFEF2; border:1px solid black; } .qid{ overflow:hidden; max-width:125px; min-width:125px; background-color:#FEFEF2; border:1px solid black; } .video{ overflow:hidden; max-width:350px; min-width:350px; background-color:#FCF6CF; border:1px solid black; } .audio{ overflow:hidden; max-width:350px; min-width:350px; background-color:#FEFEF2; border:1px solid black; } .image{ overflow:hidden; max-width:350px; min-width:350px; background-color:#FCF6CF; border:1px solid black; } #tableWrapper { position:relative; } #tableScroll { height:350px; overflow:auto; margin-top:20px; }
source share