How to position only part of the content at the top right of the td?

I have a table and within the td I have an a tag with class='day'. I want the class='day' to be at the top right of the td. I thought this should be as simple as setting the following css:

td { position: relative;} 
.day{ position: absolute; top: 0; right: 0; }

That's not working right. I have the full code here: http://jsfiddle开发者_如何学编程.net/Mftp7/

table elements can not be reliably positioned.

A way around this would be to wrap the a within another element have it position: relative.

See it in action for the first day of the month - http://jsfiddle.net/Mftp7/4/

Not come up against this before, but it looks like a quirk of td elements being display:table-cell by default, which don't seem to listen properly to relative positioning.

As a workaround, you could wrap the contents of your td inside a div and make the div relative instead. Then you'll get the desired behaviour.

Use

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

for all text in top right.

Positioning is tricky with tables. Instead of using positioning, use vertical-align: top; on the table cells, and put the day inside a block level element so that you can put text-align: right on it.

http://jsfiddle.net/Mftp7/6/

<td><p class="day"><a href="#">6</a></p></td>

table.calendar td, table.calendar th
  { vertical-align: top; }
p.day
{ text-align: right; }