In google chrome I cannot scroll down table until I alter zoom

[doniaey]

MY question is how come in google chrome, that when I append a row into a table, I cannot scroll the table until I have altered the zoom of the browser to then be able to move the scroll bar? Is it because I am appending a lot of features into a single row or is it because it could be that I'm appending big rows?Below html table where it contains a scroll bar:\[code\]<table id="qandatbl" align="center" cellpadding="0" cellspacing="0" border="0"><thead><tr> <th width="50%" class="qid">Question Number</th> <th width="50%" class="question">Question</th></tr></thead></table><div id="qandatbl_onthefly_container"><table id="qandatbl_onthefly" align="center" cellpadding="0" cellspacing="0" border="0"><tbody></tbody></table>\[/code\]Css for table is here:\[code\]#qandatbl_onthefly_container{ width:100%; overflow:scroll; max-height:500px;}#qandatbl_onthefly{ width:100%; clear:both; overflow:auto;}#qandatbl, #qandatbl_onthefly{ border:1px black solid; border-collapse:collapse; table-layout:fixed;} #qandatbl{ width:100%; margin-left:0; float:left;}#qandatbl td { vertical-align: middle;}.qid { font-weight:bold; border:1px black solid; border-collapse:collapse;}.question{ max-width:0.1%; border:1px black solid; border-collapse:collapse; line-height: 0;}\[/code\]Now I have a jquery code below where it appends rows into a table:\[code\]var qnum = 1;var qremain = 5;var count = 0;function insertQuestion(form) { var questionarea=(form.questionText.length) ? form.questionText[0] : form.questionText; var $tbody = $('#qandatbl_onthefly > tbody'); var $tr = $("<tr class='optionAndAnswer' align='center'>"); var $qid = $("<td width='50%' class='qid'></td>").text(qnum); var $question = $("<td width='50%' class='question'></td>"); $('.questionTextArea').each( function() { var $this = $(this); var $questionText = $("<textarea class='textAreaQuestion'></textarea>").attr('name',$this.attr('name')+"[]") .attr('value',$this.val()); $question.append($questionText); }); $('.num_questions').each( function() { var $this = $(this); var $questionNumber = $("<input type='hidden' class='num_questionsRow'>").attr('name',$this.attr('name')+"[]") .attr('value',$this.val()); $qid.append($questionNumber); ++qnum; $(".questionNum").text(qnum); $(".num_questions").val(qnum); --qremain; $(".questionRemain").text(qremain);}); $tr.append($qid); $tr.append($question); $tbody.append($tr); count++; $(form).find('.numberOfQuestions').val(qnum); form.questionText.valuehttp://stackoverflow.com/questions/14087429/= ""; $('.questionTextArea').val('');}\[/code\]