Html 如何使内容在顶部保持一致

我的选项和答案功能有问题。如果我选择一个包含许多按钮输出的选项，例如，如果我选择选项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>");

为

元素尝试此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;
}

下面是PHP代码，通过编辑将

cellpading

和

cellspacking

添加到

标记中：

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

var$options=$（“1.选项类型：”）；
var$noofanswers=$（“2.答案数：”）；
var$answer=$（“3.答案：”）；

它仍然知道从顶部往下一点的内容，然后您应该将

表中的
单元格填充
和
单元格间距
本身设置为0。另外，CSS中的

边框折叠。cellpadding和cellspacing不起作用，它仍在从顶部添加空间。我需要包括边框间距和边框折叠吗？我包括一个类。选择第一个表td，然后包括边框间距0和边框折叠，并仍然添加单个空格。在CSS的开头可以设置以下内容，以减少页面上所有元素周围的填充和边距，这样您就可以从一个偶数级别开始：*{边距：0；填充：0；}

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

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