Question

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 i my content drops down a little bit as it creates a space when the table cell increases. My question is simply how can I keep the content aligned near enough the top and not move down if the table cell increases a bit?

Screenshot of what it looks like:

Below is what I attempted but did not work:

.option{
    width:100%;
    text-align:center;
    padding-top:1em;
    padding-bottom:1em;
    padding-left:0;
    padding-right:0;
}

.noofanswer{
    width:100%;
    text-align:center;
    padding-top:1em;
    padding-bottom:1em;
    padding-left:0;
    padding-right:0;
}

.answer{
    width:100%;
    text-align:center;
    padding-top:1em;
    padding-bottom:1em;
    padding-left:0;
    padding-right:0;
}

Below is the tables:

var $options = $("<table class='option'><tbody><tr><td>1. Option Type:</td></tr></tbody></table>");
var $noofanswers = $("<table class='noofanswers'><tbody><tr><td>2. Number of Answers:</td></tr></tbody></table>");
var $answer = $("<table class='answer'><tbody><tr><td>3. Answer:</td></tr></tbody></table>");

UPDATE:

 var $options = $("<table class='option'><tbody><tr><td class='opt'>1. Option Type:</td></tr></tbody></table>");
    var $noofanswers = $("<table class='noofanswers'><tbody><tr><td class='noofans'>2. Number of Answers:</td></tr></tbody></table>");
    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++;
    });

CSS:

td.opt{
    vertical-align:top;
    padding-top:1em;
}

td.noofans{
    vertical-align:top;
}

td.ans{
    vertical-align:top;
    padding-bottom:1em;

}

.option{
    width:100%;
    text-align:center;
    padding-top:1em;
    padding-bottom:1em;
    padding-left:0;
    padding-right:0;
    border-collapse: collapse;
    margin:0;
}

.noofanswer{
    width:100%;
    text-align:center;
    padding-top:1em;
    padding-bottom:1em;
    padding-left:0;
    padding-right:0;
    border-collapse: collapse;
    margin:0;
}

.answer{
    width:100%;
    text-align:center;
    padding-top:1em;
    padding-bottom:1em;
    padding-left:0;
    padding-right:0;
    border-collapse: collapse;
    margin:0;
}

Answer 1

Try this CSS for <td> elements:

td {
  vertical-align: top;
}

And here is more specifics. The whole CSS should look like this:

* {
  margin: 0; padding: 0;
}

table {
  border-collapse: collapse;
}

td {
  vertical-align: top;
}

.option{
    width:100%;
    text-align:center;
    padding-top:1em;
    padding-bottom:1em;
    padding-left:0;
    padding-right:0;
}

.noofanswer{
    width:100%;
    text-align:center;
    padding-top:1em;
    padding-bottom:1em;
    padding-left:0;
    padding-right:0;
}

.answer{
    width:100%;
    text-align:center;
    padding-top:1em;
    padding-bottom:1em;
    padding-left:0;
    padding-right:0;
}

And here is the PHP code with edits to add cellpadding and cellspacing to the <table> tags:

var $options = $("<table class='option' cellpadding='0' cellspacing='0'><tbody><tr><td>1. Option Type:</td></tr></tbody></table>");
var $noofanswers = $("<table class='noofanswers' cellpadding='0' cellspacing='0'><tbody><tr><td>2. Number of Answers:</td></tr></tbody></table>");
var $answer = $("<table class='answer' cellpadding='0' cellspacing='0'><tbody><tr><td>3. Answer:</td></tr></tbody></table>");