html - 表のセルの上/下にテキストをフラッシュする方法

Question

テキストを含むテーブル セルがありますが、テキストをセルの上部または下部に揃えるにはどうすればよいですか (その上にパディングはありません)。垂直方向の位置合わせを試みましたが、まだ上部の「端」には達していません。

私のコード

<table>
    <tr>
        <td class="foo">3.2325</td>
        <td class="bar">4.5931</td>
    </tr>
</table>

table {
    border-bottom: 2px solid black;
    border-collapse: collapse;
}
table td {
    border-top: 1px solid black;
    border-collapse: collapse;
    background-color: pink;
    padding: 0 10px 10px;
}
.foo {
    font: bold 30px arial;
    border-right: 1px solid black;
    vertical-align: top;
}
.bar {
    font: normal 16px arial;
}

JSfiddle の例: http://jsfiddle.net/KznxN/2/