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/

Answer 1

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