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

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:

<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> 

Css for table is here:

#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; } 

Now I have a jquery code below where it appends rows into a table:

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.value = "";      $('.questionTextArea').val('');   } 

Source: http://stackoverflow.com/questions/14087429/in-google-chrome-i-cannot-scroll-down-table-until-i-alter-zoom

bks new dark knight rises trailer khloe and lamar oklahoma city thunder rajon rondo sunoco titanic ii