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.

回答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; on .button? http://jsfiddle.net/77qG5/4/

回答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/

回答3:

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

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

回答4:

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

来源：https://stackoverflow.com/questions/20062970/vertical-align-bottom-for-a-link-inside-a-table-cell