Columns not matching between thead and tbody

I have an application here: Application In the application please do the following: You will see a green plus button on left hand side, click on it and it will open up a modal window. In the search bar in the modal window type in the phrase `single` and submit search. A table will be shown below. Add a row from the table by clicking on the "Add" button, it will add the information in the top controls. Finally click on the "Add Question" button, this will append a table row underneath. Now the issue I have is that the columns in the `<thead>` and the columns in the `<tbody>` does not match. What my question is that how can I get these columns to match? HTML code is below showing the appended rows: ``` 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 html table where it contains the table headings columns and where the table rows are appended to: ``` <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> ``` Finally below is the CSS Code: ``` 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; } ``` I have included a jsfiddle so you can look at a demo of it and test any ideas you have: http://jsfiddle.net/heA2b/1/