How to remove space from bottom of a column

feoa21

New Member
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/14494130/Select All Answers' onClick='selectAll(this);' /><input class='allRemoveBtnsRow btnsRemove' type='button' style='display: none;' value='http://stackoverflow.com/questions/14494130/Remove All Answers' onClick='removeAll(this);' />");} else { $BtnsClass = $("<input class='allBtnsRow btnsAll' type='button' value='http://stackoverflow.com/questions/14494130/Select All Answers' onClick='selectAll(this);' /><br/><input class='allRemoveBtnsRow btnsRemove' type='button' value='http://stackoverflow.com/questions/14494130/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\]Below is screenshot showing what is happening so you understand:
ac77i.png
UPDATE:Below shows what the actual HTML (Markup) of the table looks likes:\[code\]<table id="qandatbl" cellspacing="0" cellpadding="0" border="0" align="center" style="width: 1189px;"><thead><tr><th class="optandans" width="16%"></tr></thead></table><div id="qandatbl_onthefly_container" style="width: 1205px;"><table id="qandatbl_onthefly" cellspacing="0" cellpadding="0" border="0" align="center"><tbody><tr class="optionAndAnswer" align="center"><td class="extratd" width="16%"><table class="option"><tbody><tr><td class="opt">1. Option Type:</td></tr></tbody><input class="gridTxtRow maxRow" type="text" readonly="readonly" name="gridValues[]" value="http://stackoverflow.com/questions/14494130/5"><br><span class="showGrid" href="http://stackoverflow.com/questions/14494130/#">[Open Grid]</span></table><br><table class="noofanswers"><tbody><tr><td class="noofans">2. Number of Answers:</td></tr></tbody><span class="naRow string" style="display: none;" name="numberAnswer[]" value="http://stackoverflow.com/questions/14494130/1">Must Be 1 Answer</span><input class="numberAnswerTxtRow answertxt" type="text" onchange="getButtons()" onkeypress="return isNumberKey(event)" onkeyup="numberKeyUp(this)" style="display: block;" name="numberAnswer[]" value="http://stackoverflow.com/questions/14494130/1"></table><br><table class="answer"><tbody><tr><td class="ans">3. Answer:</td></tr><tr><td><input id="answerARow" class="answerBtns answers answerBtnsOff" type="button" onclick="btnclick(this, 1);" style="display:inline-block;" name="value[1][]" value="http://stackoverflow.com/questions/14494130/A"><input id="answerBRow" class="answerBtns answers answerBtnsOn" type="button" onclick="btnclick(this, 1);" style="display:inline-block;" name="value[1][]" value="http://stackoverflow.com/questions/14494130/B" data-hid="hiddenanswerBRow0value"><input id="answerCRow" class="answerBtns answers answerBtnsOff" type="button" onclick="btnclick(this, 1);" style="display:inline-block;" name="value[1][]" value="http://stackoverflow.com/questions/14494130/C"><input id="answerDRow" class="answerBtns answers answerBtnsOff" type="button" onclick="btnclick(this, 1);" style="display:inline-block;" name="value[1][]" value="http://stackoverflow.com/questions/14494130/D"><input id="answerERow" class="answerBtns answers answerBtnsOff" type="button" onclick="btnclick(this, 1);" style="display:inline-block;" name="value[1][]" value="http://stackoverflow.com/questions/14494130/E"><input id="answerFRow" class="answerBtns answers answerBtnsOff" type="button" onclick="btnclick(this, 1);" style="display:none;" name="value[1][]" value="http://stackoverflow.com/questions/14494130/F"></td></tr></tbody></table></td></tr></tbody></table></div>\[/code\]
 
Back
Top