How to create a scrolling table with fixed headers

Question

Possible Duplicate:
HTML table with fixed headers?

I want to know what is the best way of creating a scrolling table with fixed headers for this fiddle here: http://jsfiddle.net/LKB9e/9/

I don't want separate table headers and table body and I want the columns to stay matching.

Can somebody get my fiddle working to match this?

To use fiddle just click on the "Add Question" button in the demo and it will keep appending rows into a table below.

At moment the table is scrolling with no fixed headers which is done by this:

#details{
    height:500px;
    overflow:auto;
}

Below is the source code:

HTML table:

<table id="questionBtn" align="center">
<tr>
    <th> <input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" /></th>
</tr>
</table>
</div>
<hr/>
<table id="qandatbl" align="center">
<thead class="tblhead">
    <tr>
        <th></th>
        <th class="qid">Question No</th>
        <th class="question">Question</th>
        <th class="optandans">Option and Answer</th>
        <th class="noofreplies">Number of Replies</th>
        <th class="weight">Number of Marks</th>
        <th class="image">Image</th>
        <th class="video">Video</th>
        <th class="audio">Audio</th>
    </tr>
</thead>
<tbody class="tblbody"></tbody>
</table>

Below is the javascript code where it append rows into the html table above:

function insertQuestion(form) {   


    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'>");
    var $td = $("<td class='extratd'>");
    var $plusrow = $("<td class='plusrow'></td>");
    var $qid = $("<td class='qid'></td>").text(qnum);
    var $question = $("<td class='question'></td>");
    var $noofanswers = $("<div class='noofanswers'>2. Number of Answers:<br/></div>");
    var $options = $("<div class='option'>1. Option Type:<br/></div>");
    var $answer = $("<div class='answer'>3. Answer:<br/></div>");
    var $replies = $("<td class='noofreplies'><div class='wrapper'></div></td>");
    var $weight = $("<td class='weight'></td>");
    var $image = $("<td class='image'></td>"); 
    var $video = $("<td class='video'></td>");
    var $audio = $("<td class='audio'></td>");


    $tr.append($plusrow);
    $tr.append($qid);
    $tr.append($question);
    $tr.append($td);
    $td.append($options);
    $td.append($noofanswers);
    $td.append($answer);
    $tr.append($replies);
    $tr.append($weight);   
    $tr.append($image);  
    $tr.append($video);
    $tr.append($audio);
    $tbody.append($tr);    


}

Below is the css:

            /*css for QandATable.php*/
body{
    font-size:85%;    
}            

#qandatbl{
    border:1px black solid;
    border-collapse:collapse;
}

#qandatbl td { 
    vertical-align: middle;
}

#qandatbl th{
    border:1px black solid;
    border-collapse:collapse;
    text-align:center;
}

.tblhead, .tblbody {
    display: block;
}

.tblbody{
    height: 500px;
    overflow: auto;
    width:100%;    
}

.extratd{
    border:1px black solid;
    border-collapse:collapse;
}

.qid { 
    min-width:3%;
    max-width:3%;
    font-weight:bold;
    border:1px black solid;
    border-collapse:collapse;
}

.question { 
    min-width:25%;
    max-width:25%;
    border:1px black solid;
    border-collapse:collapse;
}

.noofanswers{
    min-width:100%;
    max-width:100%;
    padding-top:5%;
    padding-bottom:5%;
}

.noofreplies{
    min-width:3%;
    max-width:3%;
    border:1px black solid;
    border-collapse:collapse;
}

.optandans{
    min-width:30%;
    max-width:30%;
    border:1px black solid;
    border-collapse:collapse;
}

.option{
    min-width:100%;
    max-width:100%;
    padding-top:5%;
    padding-bottom:5%;
}

.weight { 
    min-width:3%;
    max-width:3%;
    border:1px black solid;
    border-collapse:collapse;
    }

.answer { 
    min-width:100%;
    max-width:100%;
    padding-top:5%;
    padding-bottom:5%;
     }

.audio{
    min-width:11%;
    max-width:11%;
    border:1px black solid;
    border-collapse:collapse;
    }

.video{
    min-width:11%;
    max-width:11%;
    border:1px black solid;
    border-collapse:collapse;
    }

.image{
    min-width:11%;
    max-width:11%;
    border:1px black solid;
    border-collapse:collapse;
    position:relative;
    }

.plusrow{
    min-width:2%;
    max-width:2%;
    border:1px black solid;
    border-collapse:collapse;
    }

UPDATE:

I have attempted created a scrolling table with fixed headers but problem is that columns are not matching: http://jsfiddle.net/heA2b/1/

"Best answer goes to whoever can get my fiddle working." - Are you offering a prize for us doing your work? :-) — Billy Moat, Dec 20 '12 at 16:49
@BillyMoat No it is just that I have tried a lot of examples in SO and they have not worked for my fiddle, so what I mean is that if anybody has a solution and manages to get it working in my fiddle, then I know that the solution has worked for my application so I can mark the answer. — user1881090, Dec 20 '12 at 17:07
@Sharlike I have looked at many SO examples and tried it in my fiddle but they have not quite worked correctly. Most of the time the problem I get is that the columns do not match between thead and tbody. Thats why if somebody can get it working in my fiddle then I can see the working example — user1881090, Dec 20 '12 at 17:09
You should post your source code in the question as well, so it is available in the future when your jsfiddle link is removed — Sharlike, Dec 20 '12 at 17:11
I have included an updated fiddle undeneath my question where I attempted a scrolling table with fixed headers but problem is that columns do not match: http://jsfiddle.net/heA2b/1/ — user1881090, Dec 20 '12 at 17:17
@JaredEitnier I just cant use a plugin, Im appending table rows using jquery so doubt plugin will be good for me to use. — user1881090, Dec 22 '12 at 05:41

score 0 · Accepted Answer · edited Feb 22 '13 at 12:37

0

Here are some examples that use different methods:
jsfiddle.net/FeU3T/2/
http://www.imaputz.com/cssStuff/bigFourVersion.html
http://imar.spaanjaars.com/357/a-scrollable-table-with-a-fixed-header

edited Feb 22 '13 at 12:37

Barnee

3,212
8
41
53

answered Dec 21 '12 at 15:53

I actually tried the first method before but did not work. If you can get it working in my fiddle then I will mark your answer because like I said before I have tried couple of examples but it never worked. If you can get it to work with any method in my jsfiddle then that would solve the problem – user1881090 Dec 22 '12 at 05:32
I need it working in all 5 major browsers btw, chrome, firefox, ie, safari and opera – user1881090 Dec 22 '12 at 05:33

How to create a scrolling table with fixed headers

1 Answers1