表格单元格内链接的垂直对齐底部

Question

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.

Answer 1

Put vertical-align: bottom on the td containing the link

edit for comment:

How bout position: relative; on the td, position: absolute; bottom: 0; position: absolute; bottom: 0; on .button? http://jsfiddle.net/77qG5/4/

Answer 2

Added valign='bottom' in td

<table>
        <tr>
        <td valign="bottom"><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>

Demo: http://jsfiddle.net/77qG5/3/

Answer 3

Replace your .button class with this.. Add .button class for td.

td.button { 
    background: red;
    height: 100%;
    Vertical-align: bottom;
}

Answer 4

tdbutton { border: 1px solid #ccc; height: 100%; vertical-align: bottom; }