textarea and vertical alignment inside a table

We have a table with two columns: in each row there is a label on the left and an input box on the right. We use vertical-align=text-bottom; to align the bottom of the label text with the bottom of the text in the input boxes.

So far so good.

However, sometimes we have a textarea (multiple lines) instead of the input box. The bottom of the label on the left is aligned with the bottom of the last line of the textarea.

Is there a way to align the text on the left with the first row of the textarea?

A simplified example

<table class="waiFormTable">
  <tr>
    <td><label>Label 1:</label></td>
    <td><input id="id" type="text" name="name" value="value" /></t开发者_如何学编程d>
  </tr>
  <tr>
    <td><label>Label 2:</label></td>
    <td><textarea id="id" type="text" name="name" value="value" /></td>
  </tr>
</table>

in the CSS we define:

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

In this example I would like to have "Label 1:" text-bottom aligned with the first row of the textarea.

In fact, when you have a textarea, you want to align to the top.

Apply a special style (example : labelTextarea) in this case

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

with:

.labelTextarea{
vertical-align: top;
}

Try this

1. add a class to the td enclosing the textarea

2. set the same font and px for the table, input and textarea.

3. set a vertical-align:top; and some padding on the td enclosing the textarea

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

Note: you may need to adjust by a pixel or two.

Example: http://jsfiddle.net/jasongennaro/ccew8/

I suggest instead of using: vertical-align=text-bottom;

you could use: margin-top= 4px;

or some other amount of pixels that should line up all of the labels with the bottom of the first line.