0

私が持っているオプションと回答機能に問題があります。いくつかのボタンの出力を含むオプションを選択すると、たとえばオプション20を選択すると、20個のボタンが表示されます。テーブルのセルが増えるとスペースが作成されるため、コンテンツが少し落ちてしまいます。私の質問は、テーブルセルが少し増えた場合に、コンテンツを十分に上部に揃え、下に移動しないようにするにはどうすればよいですか？

それがどのように見えるかのスクリーンショット：

ここに画像の説明を入力してください

以下は私が試みたがうまくいかなかったものです：

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

以下は表です。

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>");

アップデート：

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

1 に答える 1

2

<td>要素に対してこのCSSを試してください：

td {
  vertical-align: top;
}

そして、ここに詳細があります。CSS全体は次のようになります。

* {
  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;
}

そして、これがタグに追加cellpaddingおよび追加するための編集を含むPHPコードです。cellspacing<table>

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>");
于 2013-01-24T01:24:40.083 に答える