Vertical align bottom for a link inside a table cell

Is it possible to push a link to the bottom of it's table cell without knowing the height of the table cell? Here's a fiddle I set up illustrating the problem: http://jsfiddle.net/77qG5/1/ I'd like the link with the red background to be aligned to the bottom of it's cell, but I can't put a fixed height on the cell due to other requirements. Here's the full code I'm using: HTML: ``` <table> <tr> <td><div class="button"><a href="#">link text</a></div></td> <td>yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda yadda</td> </tr> </table> ``` And CSS: ``` .button { display: table; background: red; height: 100%; } a { display: table-cell; vertical-align: bottom; } td { border: 1px solid #ccc; height: 100%; } ``` One update: Ah, sorry. I should have said, we can't add vertical-alignment to the `<td>` because there will be other content in the cell that needs to be aligned at the top of the cell... We're trying to just target specific content in the cell but not all the content in the cell.