vertical-align:text-top; not working in table cell (td) in HTML5

Question

Not sure why but for the life of me I cannot get my text to align on the top of a table cell (td) when the cell before it is wrapping text.

If I write it out in the HTML it works, but unable to get the same effect in my CSS.

Works with HTML:

<td style="vertical-align:text-top;">Some Text</td>

Doesn't with CSS:

table td { vertical-align: text-top; }

And I have tried every combination you can think of within my CSS

Answer 1

Make sure you are not setting "display: block" on the TD elements, as vertical align doesn't work on block elements. Also, text-top is not the best, and has some cross browser issues. Use "top" instead. Try adding this in your stylesheet:

table td { 
  display: table-cell;
  vertical-align: top; 
}