CSS，在表格单元格中垂直对齐锚点

Question

I need to align the anchor tag in a table cell to top, the table cell contains a textarea. My code is as below but the anchor tag is align to bottom of the textarea.

<style>
td {
  border:#777 1px solid; vertical-align:top;
}

textarea {
  height:100px; width:300px;
}
</style>

<table>
  <tr>
    <td>Message:</td>
    <td>
      <textarea></textarea>
      <a href="javascript:" title="Required">*</a>
    </td>
  </tr>
</table>

How to vertical-align that anchor tag to top of the cell?

Answer 1

Give that anchor a vertical-alignment of top as well:

td a {
    vertical-align: top;
}

Answer 2

<table>
<tr>
<td>Message:</td>
<td>
  <textarea></textarea>
 </td>
<td> <a href="javascript:" title="Required">*</a></td>
</tr>
</table>

Answer 3

By default, Textarea used to push the near element down to be in same line

a {
vertical-align: top;
}

Check this JSFiddle