Html text表格内的区域和垂直对齐

我们有一个有两列的表：在每一行的左边有一个标签，右边有一个输入框。 我们使用

垂直对齐=文本底部

将标签文本的底部与输入框中文本的底部对齐

到目前为止还不错

然而，有时我们有一个文本区域（多行）而不是输入框。左侧标签的底部与文本区域的最后一行的底部对齐

是否有方法将左侧的文本与文本区域的第一行对齐

一个简化的例子

<table class="waiFormTable">
  <tr>
    <td><label>Label 1:</label></td>
    <td><input id="id" type="text" name="name" value="value" /></td>
  </tr>
  <tr>
    <td><label>Label 2:</label></td>
    <td><textarea id="id" type="text" name="name" value="value" /></td>
  </tr>
</table>

---

在本例中，我希望“标签1:”文本底部与文本区域的第一行对齐。

我建议不要使用：

垂直对齐=文本底部

您可以使用：
margintop=4px

或者一些其他数量的像素，应该将所有标签与第一行底部对齐。
我建议不要使用：
vertical align=text bottom

您可以使用：
margintop=4px

或者一些其他数量的像素，应该将所有标签与第一行的底部对齐。
事实上，当您有一个文本区域时，您希望与顶部对齐

在这种情况下应用特殊样式（例如：
labelTextarea
）

<tr>
    <td class="labelTextarea"><label >Label 2:</label></td>
    <td><textarea id="id1" type="text" name="name1"  >value</textarea></td>
</tr>

事实上，当您有一个文本区域时，您希望与顶部对齐

在这种情况下应用特殊样式（例如：
labelTextarea
）

<tr>
    <td class="labelTextarea"><label >Label 2:</label></td>
    <td><textarea id="id1" type="text" name="name1"  >value</textarea></td>
</tr>

试试这个

将类添加到包含
文本区域的
td
中

table.waiFormTable, table.waiFormTable input, table.waiFormTable textarea{
    font-family:arial;
    font-size:12px;
}

table.waiFormTable thead tr, table.waiFormTable tbody tr {
      vertical-align: text-bottom;
}

.textarea{
    vertical-align:top;
    padding-top:2px;
}

为
表
、
输入
和
文本区域
设置相同的
字体
和
px

设置一个
垂直对齐：顶部
和一些
填充
在
td
上，包围
文本区域

table.waiFormTable, table.waiFormTable input, table.waiFormTable textarea{
    font-family:arial;
    font-size:12px;
}

table.waiFormTable thead tr, table.waiFormTable tbody tr {
      vertical-align: text-bottom;
}

.textarea{
    vertical-align:top;
    padding-top:2px;
}


注意：您可能需要调整一两个像素

示例：
试试这个

将类添加到包含
文本区域的
td
中

table.waiFormTable, table.waiFormTable input, table.waiFormTable textarea{
    font-family:arial;
    font-size:12px;
}

table.waiFormTable thead tr, table.waiFormTable tbody tr {
      vertical-align: text-bottom;
}

.textarea{
    vertical-align:top;
    padding-top:2px;
}

为
表
、
输入
和
文本区域
设置相同的
字体
和
px

设置一个
垂直对齐：顶部
和一些
填充
在
td
上，包围
文本区域

table.waiFormTable, table.waiFormTable input, table.waiFormTable textarea{
    font-family:arial;
    font-size:12px;
}

table.waiFormTable thead tr, table.waiFormTable tbody tr {
      vertical-align: text-bottom;
}

.textarea{
    vertical-align:top;
    padding-top:2px;
}


注意：您可能需要调整一两个像素

示例：
我考虑过这个问题，但通常我不喜欢使用绝对值来定义格式。根据字体/浏览器/操作系统的不同，页面的呈现方式可能会有所不同。我同意，但我认为没有其他方法可以做到这一点，因为文本区域没有第一行值。我认为您应该在多个浏览器中进行测试，并自己定义字体。事实上，如果你自己设置单元格和输入框的高度，那么无论浏览器/操作系统是什么，它看起来都应该是一样的。我考虑过这一点，但通常我不喜欢使用绝对值来定义格式。根据字体/浏览器/操作系统的不同，页面的呈现方式可能会有所不同。我同意，但我认为没有其他方法可以做到这一点，因为文本区域没有第一行值。我认为您应该在多个浏览器中进行测试，并自己定义字体。事实上，如果你自己设置单元格和输入框的高度，那么无论浏览器/操作系统是什么，它看起来都应该是一样的。是的，我试过了，但是标签文本的顶部与文本区域的上一行对齐。textarea中文本的顶部与textarea本身的顶部不对应。我知道这不是一个主要的区别，但它看起来“错了”。好吧，保留这个解决方案，保留输入的顶部和底部填充，如
input，textarea{padding bottom:0；padding top:0；}
是的，我试过了，但是标签文本的顶部与textarea的上一行对齐。textarea中文本的顶部与textarea本身的顶部不对应。我知道这并不是一个主要的区别，但它看起来“错了”。好吧，保留这个解决方案，保留输入的顶部和底部填充，如
input，textarea{padding bottom:0；padding top:0；}
你能启动一个JSFIDLE并对javascript解决方案持开放态度吗？反对票上的评论总是很受欢迎的…你能启动一个JSFIDLE并对javascript解决方案持开放态度吗？反对票上的评论总是很受欢迎的。。。