css - テーブル レイアウトの横へのオーバーフローを修正

Question

問題

1. 私は固定幅のテーブルを持っています (そうでなければなりません) が、セルの 1 つに長すぎて収まらないテキストが含まれているため、右側のセルの外側にはみ出します。

2. すべてのテーブル セルのテキストを右揃えにする必要があります。

3. 理想的には、マークアップを変更したくありません。

私が探しているもの

（例のテキスト）「longlonglong」が他の前のセルよりも左にオーバーフローし、右揃えの状態を維持する方法を見つける必要があります。

コード

HTML

<table width="120">
    <tr>
        <td width="30">text</td> 
        <td width="30">text</td>
        <td width="30">text</td>
        <td width="30">very longlonglong text</td>
    </tr>
</table>

CSS

td {
    text-align: right;
    border: 1px solid black;
    vertical-align: top;
}
table {
    border: 1px solid red;
    table-layout: fixed;
}

例

http://jsfiddle.net/xareyo/eVkgz/