keeps adding space at bottom of table

[bmgilst]

I am having an issue with an options and answers feature I have. If I select an options which contains an output of some many buttons e.g If I choose option 20, it will display 20 buttons, the problem I am getting is that at the bottom of the table column, the space drops down a little bit. It only does it when an option is changed and then the space remains throughout. My question is simply how can I stop the space at the bottom of the table column to increase when an option changes? The table column which is the issue is known as \[code\]extratd\[/code\] and inside this table column is a nested table known as answer. I want \[code\]extratd\[/code\] to be \[code\]vertical-align:top;\[/code\] as it is now.Below is the HTML/jquery code where it contains the table row, the table and the code where it contains the letter buttons display:\[code\]var $tr = $("<tr class='optionAndAnswer' align='center'>");var $td = $("<td width='16%' class='extratd'>");var $answer = $("<table class='answer'><tbody><tr><td class='ans'>3. Answer:</td></tr></tbody></table>");var $this, i = 0, $row, $cell;$('#optionAndAnswer .answers').each(function () { $this = $(this); if (i % 6 == 0) { $row = $("<tr/>").appendTo($answer); $cell = $("<td/>").appendTo($row); } var $newBtn = $(("<input class='answerBtnsRow answers' type='button' style='display:%s;' onclick='btnclick(this, " + gQuestionIndex + ");' />").replace('%s', $this.is(':visible') ? 'inline-block' : 'none')).attr('name', "value[" + gQuestionIndex + "][]").attr('value', $this.val()).attr('class', $this.attr('class')).attr('id', $this.attr('id') + 'Row'); $newBtn.appendTo($cell); i++;});var $this = $(this);var $BtnsClass = '';$row = $("<tr/>").appendTo($answer);$cell = $("<td/>").appendTo($row);if ($questionType == 'True or False' || $questionType == 'Yes or No') { $BtnsClass = $("<input class='allBtnsRow btnsAll' type='button' style='display: none;' value='http://stackoverflow.com/questions/14501563/Select All Answers' onClick='selectAll(this);' /><input class='allRemoveBtnsRow btnsRemove' type='button' style='display: none;' value='http://stackoverflow.com/questions/14501563/Remove All Answers' onClick='removeAll(this);' />");} else { $BtnsClass = $("<input class='allBtnsRow btnsAll' type='button' value='http://stackoverflow.com/questions/14501563/Select All Answers' onClick='selectAll(this);' /><br/><input class='allRemoveBtnsRow btnsRemove' type='button' value='http://stackoverflow.com/questions/14501563/Remove All Answers' onClick='removeAll(this);' />");}$BtnsClass.appendTo($cell);$tr.append($td);$td.append($answer);$tbody.append($tr); \[/code\]Below is the CSS for the \[code\]extratd\[/code\] and \[code\]answer\[/code\]:\[code\].extratd{ border:1px black solid; border-collapse:collapse; vertical-align:top; padding-top:1em; padding-bottom:1em; padding-left:0; padding-right:0;}.answer{ width:100%; text-align:center;}\[/code\]