表格單元格內鏈接的垂直對齊底部

Question

是否可以在不知道表格單元格高度的情況下將鏈接推到表格單元格的底部？ 我設置了一個小提琴來說明問題： http : //jsfiddle.net/77qG5/1/我希望紅色背景的鏈接與單元格的底部對齊，但是我不能固定由於其他要求，電池的高度。 這是我正在使用的完整代碼：

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>

和CSS：

.button { 
    display: table;
    background: red;
    height: 100%;
}
a {
    display: table-cell;    
    vertical-align: bottom;
}
td { 
    border: 1px solid #ccc;
    height: 100%;
}

一個更新：啊，對不起。 我應該說，我們不能在<td>添加垂直對齊方式，因為單元格中的其他內容需要在該單元格的頂部對齊...我們正在嘗試僅針對特定內容單元格中的所有內容，但不是單元格中的所有內容。

Answer 1

將vertical-align: bottom放在包含鏈接的td的vertical-align: bottom

編輯評論：

position: relative; 在td上， position: absolute; bottom: 0; position: absolute; bottom: 0; 在.button上？ http://jsfiddle.net/77qG5/4/

Answer 2

在td中添加了valign='bottom'

<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>

演示： http ： //jsfiddle.net/77qG5/3/

Answer 3

以此替換您的.button類。為td添加.button類。

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

Answer 4

tdbutton {邊框：1px實心#ccc; 高度：100％; 垂直對齊：底部； }